jQuery 1.4 Animation Techniques - Index of

Full Page Animations
Next we define the removeFrame() function which will be executed by setInterval.
All this function does is check whether there is more than one element within the frames
container and if so, remove the first one. Every 50 milliseconds, the top image will be
removed, which is fast enough for the repeated showing of still images to be perceived
as an animation. If there is only one image left, we clear the timeout as the animation
has completed.
Next we define the for loop, specifying the maximum number of frames, and decrementing
on each iteration of the loop. We don't need to specify a comparison condition in this form
of loop however, because the loop will naturally end when x = 0 (because 0 is a falsey
value). Using decrementing for loops is a proven strategy for faster JavaScript.
On each iteration of the loop we create a new element and set its src to point to the
correct image file using a combination of the strings we created earlier and the counter
variable. We set the z-index of each image as it is created using the css() method and the
x variable used to control the loop. On each iteration, x will decrease, so each image added
to the page will be lower down in stacking order than the previous one, which is exactly the
order we require. We then append the image to our new container .
At the end of each iteration, we increment the counter variable by 1. After the loop has
completed, we append our container element, which now contains all of the necessary
images, to the container hardcoded into the page. This will overlay the loading spinner.
In a full implementation, we'd probably remove the spinner at this point.
Pop quiz – implementing stop-motion animation with jQuery
1. In this example, we used a decrementing for loop, why?
a. We need to in order to set a descending z-index on the images.
b. The decrementing format of the loop is required when creating inline
elements with jQuery.
c. Because the code is easier to read.
d. For performance reasons. Because the loop isn't checking a condition on
every iteration. It's simply removing one from the value of x, so it runs faster.
Have a go hero – extending stop-motion animation
Simple two dimensional stickmen aren't the only images that can be used to create a
stop-motion animation. Pretty much any series of sequential images can be used, so
experiment with color images or photographs. Time-lapse photography offers an
excellent source of the right kind of photos to use.
[ 204 ]