jQuery 1.4 Animation Techniques - Index of

Download from Wow! eBook
},
timer = setInterval(function() { removeFrame() }, 50);
for(var x = 75; x--;) {
$("", {
src: srcStr1 + counter + srcStr2
}).css("zIndex", x).appendTo(frames);
counter++;
}
frames.appendTo("#cartoon");
When we run the page, the animation should proceed as we expect, much like the type
of sketch we perhaps may have idly created in a notepad in our youth and "watched" by
flicking through the pages quickly. The following screenshot shows a single frame of the
stickman animation:
Clearly, the best way to view the animation is in a browser.
[ 203 ]
Chapter 7
What just happened?
We start out by initializing some variables. We set a counter variable and a series of strings
representing the common strings that we'll need to use repeatedly. These will be used inside
a for loop so we don't want to define them within the loop as JavaScript will create the
same string objects repeatedly, whereas by defining them outside of the loop will ensure
they only get created once.
We also create a new container which we'll append each of the new frames to, and
assign a function to the setInterval JavaScript function.