jQuery 1.4 Animation Techniques - Index of

[ 119 ]
Chapter 5
If the image already has the class name expanded, we animate the image back to its small
size. Again we use the two-object format of the animate() method, supplying false as
the value of the queue property, and removing the class name expanded in an anonymous
callback function passed to the complete property. Once the wrapper has been created, we
append it to the of the page.
At this point the code we've written will work as intended—clicking an image will result in
the expanded version being animated to its full size. However, if the page is resized at all,
the overlays will no longer be overlaying their images.
Time for action – maintaining the overlay positions
Because the overlays are positioned absolutely, we need to prevent them from becoming
misaligned if the window is resized:
$(window).resize(function() {
$("div.expander-wrapper").each(function(i) {
var newCoords = $("#image" + (i + 1) + "-thumb").offset();
$(this).css({
top: newCoords.top,
left: newCoords.left
});
});
});
What just happened?
All we need to do is make sure the overlay images stay directly on top of the original images
when the page resizes, which we can achieve by binding a handler for the resize event to the
window object. In the handler function, we just get the new coordinates of the underlying
image, and set the top and left properties of the wrapper accordingly. Note that we don't
animate the repositioning of the overlays.