jQuery 1.4 Animation Techniques - Index of

[ 253 ]
Chapter 9
This will allow us to select each element in turn one after the other on each iteration of
the loop. The first thing we do in the function is cache a reference to the current
using the index as an argument for the eq() method. We add 1 to the index value to avoid
selecting the first image.
In the next block of code we set some of the items in our matrix array. We set the scale
parameters (items 1 and 7 in the array) to 0.7 so that the skewed images are reduced in size
slightly, and we set the skew parameters (items 3 and 5) to the radian equivalent of -30 and
-10 degrees. This will skew the images slightly up and to the right.
We also set the translate parameters (items 9 and 10 in the array) to position the skewed
elements correctly so that they stack up horizontally. If the browser in use is Firefox we have
to use px in the value for the translate properties, but with other browsers the values should
be unit-less. We use a ternary condition to check the vendor variable (this will contain the
vendor-prefix for the current browser) and set the value accordingly.
Once we've set our array items we then check that the browser in use is not IE and provided
it isn't, we apply the skew to the current element. We also set the z-index of the current
element using the order variable, which is set to the length of the number of images.
On each iteration of the loop we reduce the value of this variable by one (later in this section
of code you'll see the statement index-- which decreases the variable). The z-index of
each element will therefore get progressively lower as we process each image.
If the browser in use is IE, we apply the Microsoft matrix and set some different CSS on the
images. The translate parameters don't work in IE, so we position the images using jQuery
instead. Skewing the elements in IE also causes the elements to increase in size, so we have
to drastically reduce their dimensions, which we also do with jQuery.
Once we have set the required CSS styles, we then skew the elements by manipulating the
proprietary Microsoft matrix filters. Remember, these properties can only be manipulated
on actual DOM elements, not jQuery objects, so we retrieve the raw element using jQuery's
get() method and the index 0.
After the each() loop has finished, we reset parameters 3 and 5 in the matrix array. This
is because we will use the array again several times, so each time we should use the default
values for the parameters.