jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – adding the markup and styling

1. Add the following markup to the template file:

   <div id="cartoon">
     <img class="loading" src="img/stickman/ajax-loader.gif" alt="Loading Frames">
   </div>

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 ...