jQuery 1.4 Animation Techniques - Index of

Custom Animations
Time for action – creating the overlay images
Next we should create an almost exact copy of each image on the page to use as an overlay:
$(".expander").each(function(i) {
var expander = $(this),
coords = expander.offset(),
copy = $("", {
id: expander.attr("id").split("-")[0],
src: expander.attr("src"),
width: expander.width(),
height: expander.height()
});
What just happened?
In this part of the , we select each image on the page and process them using
jQuery's each() method. We set some variables, caching a reference to the current image
and storing its coordinates on the page relative to the document using the jQuery offset()
method.
We then create a new image for each existing image on the page, giving it an id attribute
that pairs it with the image it is overlaying, the src of the original image, and the width and
height of the original image. We use the JavaScript split() function to remove the part
of the string that says thumb when we set the id of the new image.
Note that the previous code does not represent an entire snippet of fully-functional code.
The outer function passed to the each() method has not yet been closed as we need to
add some additional code after these variables.
Time for action – creating the overlay wrappers
We now need to create the wrappers for each of the overlay images (note that this code is
still within the each() method and so will be executed for each of the images that have the
expanded class name):
$("", {
"class": "expander-wrapper",
css: {
top: coords.top,
left: (webkit === true && expander.css("float") === "right") ?
(coords.left + expander.width()) : coords.left,
direction: (expander.css("float") === "right") ? "rtl" :
"ltr"
[ 116 ]