jQuery 1.4 Animation Techniques - Index of

[ 129 ]
Chapter 5
Once we've defined everything we need, we can append the new anchor to the specified
container. We also create the next link within the current function as well, giving it a very
similar set of attributes and a click handler too. All that differs in this click handler is that we
test for an image after the current one, and move to the first image in the container if there
isn't one.
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 = $("", {
id: config.containerID
});
for (var x = 0; x < multiX; x++) {
$("", {
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);
};