jQuery 1.4 Animation Techniques - Index of

Download from Wow! eBook
CSS3 Animations
flat.prev().css("zIndex", "");
flat.removeClass("flat").css("zIndex", "");
preFlat.addClass("flat");
}
} else {
}
};
clearInterval(flatInterval);
flat.css("zIndex", order + 1);
preMatrix[3] = -30 * oneRad;
preMatrix[5] = -10 * oneRad;
if(!flatInterval) {
var flatInterval = setInterval(function() { skew() }, 1);
}
};
What just happened?
The first thing we do in our function is set the variables used by the function. We cache
a reference to the current element that has the class flat and also set this element's
z-index to be one higher than any of the other images to ensure it is always on top
of the other images.
We also cache a reference to the next image after the flat image. In this function, this will
be the image to the right of the un-skewed image. We then make two copies of the original
matrix array, one for the flat element and one for the preFlat element. To copy an array
all we do is use JavaScript's slice() method with an index of zero.
The next two variables we create are the initial dimensions of the flat and preFlat
images. These variables are only used by IE, but because of hoisting we need to define
them here and not in an IE-specific code block later in the function.
Next we define an inline function called skew() which we'll repeatedly call in order to
produce the actual animation. Within this function we first check that there is an element
after the flat element by checking that the preFlat object has a length. If the length is
equal to zero (that is if it does not have length), we simply clear any intervals that may exist,
and make sure the flat element is at the top of the z-index stack.
[ 256 ]