jQuery 1.4 Animation Techniques Beginner's Guide

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 = $("<img>", {
      id: expander.attr("id").split("-")[0],
      src: expander.attr("src"),
      width: expander.width(),
      height: expander.height()
    });

What just happened?

In this part of the <script>, 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 ...