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