Animations

Things that move and change can be eye-catching, which can add visual appeal or annoying distraction, depending on how its used. Sparingly and cleverly employed, though, it can be fun. Using jQuery, certain animations are very easy to do. The jQuery animate method will successively change numerical CSS values to some target values over the course of some time period of your choosing.

Animation Example

For this demonstration of example, we had an image of Draco Malfoy come swooping across the page, growing and fading as it does so, a little like the cursed figure in Grimauld Place (in Order of the Phoenix).

If you'd like to see it again, you can reload the page, or just click the following button:

How It's done

The image of Draco starts out already in the page, and we use static CSS to make it very small. Since the animation will move it around on the page, we also set it to be position: absolute and make a parent element be position: relative. That's all the setup we need for now.

The function that runs the animation is the following:

function runDracoMalfoyAnimation() {
    $("#draco")
        .show()
        .css({width: "4px", height: "3px", opacity: 1.0, left: "0px", top: "0px"})
        .animate({width: "2400px", height: "1800px", opacity: 0.0, left: "50px", top: "50px"},
                 3000,
                 hideDraco);
}
      

Ignore the .show() and look at the .css() method. This sets the width and height to be very small, the opacity to be 1.0 (fully opaque) and the left and top edges to be zero. Yes, this is redundant with the static CSS values, but we may run this animation more than once, so it's a good idea to re-set it to the desired initial conditions at the beginning of each run. It's also nice to have those values there as we figure out the animate() method.

All these CSS settings are specified as property-value pairs in a JavaScript object literal, separating properties from values with a colon and separating pairs with commas, and surrounding the whole package with braces. Note that all these values are numerical; we're not setting the font or other such properties, since those can't be animated.

The animate() method, of course, is the one that does all the work. We set the desired target values, again using a JavaScript object literal. The next argument is the length of time for the animation, in milliseconds. Here, we've chosen 3000ms, or three seconds. The last argument, which is optional, is the name of a function to invoke when the animation completes. Here, we invoke hideDraco, which is just the following simple function:

function hideDraco() {
   $("#draco").hide();
}          

It's because we hide the image of Draco after the animation completes that we begin the animation by the .show().

The setup is completed with two lines of code:

$("#again").click(runDracoMalfoyAnimation);

runDracoMalfoyAnimation();

The first sets up the button to allow you to re-run this animation. In practice, you might not have this.

The second runs the animation when the page loads. In practice, you might instead run the animation in some other circumstance, maybe when the user submits a form or clicks some other button.

Animation is a very general technique, so talk to your advisor if you'd like to employ it in some different way.

Use view source on this page to see exactly how we did it.