jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
The first variable we create is a cached selector for the outer container of our widget. This
is the one and only jQuery object we create in this entire example. Some of the code we'll
add is quite intensive in places, so keeping the number of jQuery objects we create to a bare
minimum is essential for performance reasons.
Next we use the original jQuery object and the find() jQuery method to cache a selector
for the flow element (the direct parent of the image elements that will be skewed) as we'll
need to access or manipulate this element several times as well.
Then we store the number of image elements in the widget using the length property
of a jQuery object containing the child elements of the flow element. We also store the
result of converting one degree to one radian so that we can easily convert from one unit
to another throughout the script without repeatedly performing the same calculation. Both
the CSS3 transform matrix and IE's matrix filter can accept radians so that makes them a
convenient unit to work with.
We then create our matrix array, and Microsoft's matrix property as a string. The array
includes all of the individual properties as array items, including the required commas as
strings. The reason we include the commas in our array is so that we can call the join()
JavaScript function on the array later without specifying a separator and without having to
worry about removing the unnecessary commas this would insert incorrectly.
Next we add the getVendor() function that we used in the last example. This is a
convenient way to ensure the correct prefix is used when we apply the skew styling.
We won't cover this function in detail as we have already looked at it earlier in the chapter.
Again we call the function straight away after defining it and store the result in a variable
for later use.
The last variable we create will hold a string containing either the CSS3 matrix function with
all required parameters, or it will contain IE's matrix property in its most basic form, with
only the sizingMethod parameter defined. If you remember from the previous example,
IE can only manipulate the matrix property after it has been initially set.
At this point we can move on to prepare the first image. We select the first image using
jQuery's eq() method, passing in 0 as the index of the element we are interested in.
We set a class name of flat on the first image so that we can easily select it later, and
also give it a higher z-index than the other images so that it is visible in its entirety.
Next we loop through the remaining images using jQuery's each() method.
The anonymous function we pass to the method accepts the parameter i which
is the index of the current iteration.
[ 252 ]