jQuery 1.4 Animation Techniques - Index of

[ 245 ]
Chapter 9
If none of these tests identify a vendor prefix, then it's likely that the browser in use is a
version of Internet Explorer. Internet Explorer versions 8 and below do not currently have a
vendor prefix (although IE9 does feature one) and do not support the rotate function at all.
It does support rotation via its proprietary filter property however.
If the vendor variable is still set to null at this point, we set the variable to filter. In order
to programmatically work with the value of the filter property in IE, the filter must
already be applied to the element, so we also set a filter on the element in this part of the
code using jQuery's css() method ready for us to manipulate later in the code. We also set
the sizing mode to auto expand in order to prevent the element from being clipped when
the rotate is applied.
At the end of the function the prefix variable is returned containing a string of the vendor
prefix for the browser currently in use. Directly after the function we set a variable called
vendor which will contain the value returned by the function for easy reference.
Next we define a regular function doRotate() which will be used to perform the actual
rotation. The first thing we do in this function is increment the second property of our
rotateStrings array by one.
We then check whether the vendor variable equals filter. If it does, we know that the
browser in use is IE and can proceed to determine the values that the proprietary filter
will need. IE allows rotation to be implemented in two different ways. We could use the
BasicImage filter property to rotate the image, although that only allows us to set one
of four rotation values: 0, 1, 2 or 3, which correspond to 0, 90, 180, or 270 degrees. This is
simply not flexible enough for our needs in this example.
So instead we use the Matrix filter, which gives us much more control over the degree of
rotation. This is very similar to the CSS3 matrix transform, with six parameter values that are
combined to generate the different transforms (a rotation in this case).
The parameters that we use in this example are M11, M12, M21, and M22 which map roughly
to the first four values in the CSS3 version, with the exception that values two and three are
reversed in Microsoft's version.
The values of each of these properties must be computed using the JavaScript trigonometry
Math.cos and Math.sin functions. We set some variables to calculate these values. The
first, rad, converts the number of degrees of rotation into radians as these are the units
required by the Matrix filter. The radians are calculated by multiplying the current degree
of rotation (as stored in the second item in our rotateStrings array) by PI times 2 divided
by 360.