jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – creating the transition overlay

Our next function will deal with creating the overlay and transition elements:

$.tranzify.createOverlay = function(config) {

  var posLeftMarker = 0,
    bgHorizMarker = 0

  overlay = $("<div></div>", {
    id: config.containerID
  });

  for (var x = 0; x < multiX; x++) {

    $("<div></div>", {
      width: config.transitionWidth,
      height: config.transitionHeight,
      css: {
        backgroundImage: "url(" + $("." + config.visibleClass, $(config.selector)).attr("src") + ")",
        backgroundPosition: bgHorizMarker + "px 0",
        left: posLeftMarker,
        top: 0
      }
    }).appendTo(overlay);
      bgHorizMarker -=config.transitionWidth;
    posLeftMarker +=config.transitionWidth; 

  }
  overlay.insertBefore("#" + config.prevID);
};

What just happened?

Our next function ...