jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
An unfortunate problem that occurs in IE when rotating elements is that the rotated element
drifts around the page as it is being rotated. This is caused by the size of the elements
bounding box increasing as the element rotates. The rotation does occur around the center
of the element, but because IE thinks the element has grown, the center of the rotated
element is shifted on each rotation.
The drifX and driftY variables that we set allow us to determine how far the element
has shifted so that we can correct it. The shift is worked out by comparing the original width
and height of the element prior to it being rotated, with the new width and height
following the rotation.
We also store the raw img element from the jQuery object using jQuery's get() method
with an argument of 0 which returns the actual DOM node instead of a jQuery object. The
filter must be applied to a proper DOM element.
Once we've set our variables, we then correct the drift caused by the previous rotation
using jQuery's css() method, and then insert our computed trigonometry values into
the Matrix filter.
Finally, if the vendor variable equals anything other than filter we can simply set
the relevant vendor prefix to the items in our rotateStrings array. We do this by
calling JavaScript's join() method on the array. This is much more efficient than using
concatenation to create the string needed for the CSS property, and as this function will be
executed repeatedly we really need to make sure it is as efficient as possible.
The last thing we do in our code is start the rotation animation off by setting an interval that
calls our doRotate() function every 100 milliseconds. We use an anonymous function as
the first argument of the setInterval() function which avoids requiring that we attach
the function to be executed be saved to the window object.
Problems with IE
Aside from the fact that IE makes us work twice as hard as any other browser to set the
element's rotation, it also presents us with another problem: it totally destroys the alpha
layer of the PNG we are rotating. Suddenly our nice anti-aliased circle-edge becomes jagged
and unsightly (view this example in IE to see the issue).
The animation is also slightly jerky in IE, and both this and the inability to use PNGs with
alpha-layers in them could easily be a show-stopper for IE. If this was the case, we could
easily disable the animation in IE by simply doing nothing when the filter property is
returned by our getVendor() function. There are some things we could do however, to
negate the problems in IE.
[ 246 ]