jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
We also have to update the preFlat image so that it goes from being skewed to the right to
being flat. We also have to increase the size of the preFlat image as they start out smaller.
In a similar way to before, we update the relevant array items in the preMatrix so that
over the course of 30 iterations of the skew() function they end up at the right values.
The preFlat image also needs to be translated, but this time along both the x and y axes.
Next we check the vendor string once more and as long as it isn't filter (IE), we apply the
transform to the flat and preFlat image by joining the array. If it is IE we have to do a
little more work to apply the transformation.
We apply each of the relevant Matrix properties, M12 and M21 on the flat and preFlat
images. We use jQuery's get() method with an index of 0 to obtain the actual DOM
element once more. We also reduce the size of the flat image, and increase the size of the
preFlat image using our flatDims and preDims variables that we initialized earlier and
then jQuery's css() method to apply the new sizes.
IE's Matrix property helpfully ignores the scaling parameters when the sizingMethod is
set to auto expand, but this property must be set to prevent the images from being clipped.
This is why we fallback to jQuery's css() method.
Unusually, we are able to set fractional pixel sizes when using IE, which is fortunate as it
allows us to set the size of the images correctly in order for them to end up at the right size
when the animation ends.
We now come to the other part of the inner conditional. This block of code is executed once
at the end of the animation when the third and fifth items in our flatMatrix array are
greater than 30 and 10 respectively.
First we clear the intervals so that the skew is not animated further. We then check the
vendor string once more, and as long as it isn't filter we reset the skew on the flat
element to 0 (on both the x and y axes).
This is needed because for some reason, the preFlat image doesn't quite go back to exactly
zero. I assume this is because JavaScript's Math functions do not allow the number to have
enough decimal places to be entirely accurate. The image is only slightly off however, so this
sudden switch to 0 at the end of the animation is not noticeable.
Unfortunately, translating an element at the same time as skewing it does not seem possible
in IE. What happens is that IE applies the new skew, but fails to apply the new position until
after the skew animation has finished, so the element is skewed and then moved in two
separate steps. It doesn't look too great so instead we simply reposition the flat element
without animating it at this point once the skew animation has finished.
After correcting the skew, or the position, we then remove the z-index from the flat
element (which has now been skewed to the left) and remove the class name flat from it,
and then add the class name flat to the preFlat element.
[ 258 ]