jQuery 1.4 Animation Techniques - Index of

CSS3 Animations
When updating the skew on our flat and preFlat elements, we are skewing the element
the opposite way. To skew an element to the right, we need to use a minus figure so instead
of going from 0 to 30 or from -30 to 0, we are going the opposite way, from 30 to 0 or 0 to
-30, so we minus the radian equivalent of 1 degree instead of adding it.
We are also translating to the right instead of to the left, so instead of removing 3 pixels each
time to move the image left we add 3 pixels to move it right. We also provide different values
for the dimensions variables used by IE.
This time when we set the z-index of the element that was previously flat, we add 1 to
the z-index of the next element (to the right) to make sure it is higher than this element.
However, we can't use our length variable from earlier or it will be at the same z-index as
the flat element, but will appear above it as it comes after the element in the DOM.
The final difference is that when we initialize the third and fifth items in our array, we are
specifying the current skew to the left and not the right, so these items are set to the radian
equivalent of 30 and 10 degrees instead of -30 and -10.
Time for action – wiring up the controls
All that's left to do is add the event handlers to the left and right links at the bottom of the
widget so that the different images can be viewed. After the two skew functions, add the
following code:
viewer.find("#left a").click(function(e) {
e.preventDefault();
skewRTL();
});
viewer.find("#right a").click(function(e) {
e.preventDefault();
skewLTR();
});
What just happened?
All we do is add a click handler to each link which prevents the link from being followed
with preventDefault() and then call the relevant skew function. The example should
now be fully working in all common browsers, although the effect is handled rather badly
by IE in general, with slower, more sluggish animations, less accurate skewing, and jittery,
uncontrollable movements.
One point to note is that there is a difference between the full and minified versions of the
jQuery source file which causes IE to throw errors when the minified version is used, but not
when the un-minified version is used.
[ 262 ]