jQuery 1.4 Animation Techniques Beginner's Guide

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 ...