jQuery 1.4 Animation Techniques - Index of

Full Page Animations
Time for action – adding the markup and styling
1. Add the following markup to the template file:
2. Save the template file as stickman.html. Now add the following styles to a
new file:
#cartoon { width:500px; height:500px; position:relative; }
img { position:absolute; top:0; left:0; }
img.loading { z-index:0; left:50%; top:50%; }
3. Save this stylesheet as stickman.css in the css folder.
What just happened?
All we have on the page is a container to load the frames into and a loading icon so that
it appears as if something is happening when the page initially loads and the frames are
being created. While running this example locally, the frames should be loaded pretty much
instantly, but in the wild there would certainly be some delay.
The CSS sets the container to the width of a single frame, and the frames are positioned
absolutely so that they stack up on top of each other. We'll set the z-index for each element
manually in the script. We can also position the loader so that it is roughly in the centre of
the container.
Time for action – creating the frames and running the animation
Next, add the following code to the empty function at the end of the in stickman.
html:
var counter = 1,
srcStr1 = "img/stickman/stick-kick",
srcStr2 = ".jpg",
frames = $(""),
removeFrame = function() {
if (frames.children().length > 1) {
frames.children(":first").remove();
} else {
clearInterval(timer);
}
[ 202 ]