Time for action – creating a test page and adding some styling

Once again we'll create the example page and basic styling first and add the script last.

  1. The underlying HTML for this example is very light. All we need in the <body> of our template file are the following elements:
    <div id="frame">
    <img class="visible" src="img/F-35_Lightning.jpg" alt="F-35 Lightning">
    <img src="img/A-12_Blackbird.jpg" alt="A-12 Blackbird">
    <img src="img/B-2_Spirit.jpg" alt="B-2 Spirit">
    <img src="img/SR-71_Blackbird.jpg" alt="SR-71 Blackbird">
    <img src="img/F-117_Nighthawk.jpg" alt="F-117 Nighthawk">
</div>
  2. Save this page as advanced-transitions.html.
  3. Like the markup, the CSS we rely on for a plugin should also be as minimal as possible. Luckily not much CSS is required ...

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