Time for action – creating the frames and running the animation

Next, add the following code to the empty function at the end of the <body> in stickman.html:

var counter = 1,
  srcStr1 = "img/stickman/stick-kick",
  srcStr2 = ".jpg",
  frames = $("<div id=\"frames\"></div>"),
  removeFrame = function() {
    if (frames.children().length > 1) {
      frames.children(":first").remove();
    } else {
      clearInterval(timer);	
    }
  },
  timer = setInterval(function() { removeFrame() }, 50);

  for(var x = 75; x--;) {
    $("<img />", {
      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 ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial