Time for action – creating the underlying page and basic styling

First, we'll create the underlying page on which the example will run.

  1. Add the following HTML to the <body> of our template file:
    <article>
  <h1>The Article Title</h1>
  <p><img id="image1-thumb" class="expander" alt="An ASCII Zebra" src="img/ascii.gif" width="150" height="100">Lorem ipsum dolor...</p>
  <p><img id="image2-thumb" class="expander" alt="An ASCII Zebra" src="img/ascii2.gif" width="100" height="100">Lorem ipsum dolor...</p>
</article>
  2. Save the example page as animate-size.html. We'll keep the styling light in this example; in a new file in your text editor, add the following code:
    article { display:block; width:800px; margin:auto; z-index:0; font:normal 18px "Nimbus Sans L", ...

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