jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
3. Save the file as bounce.html. We also need a few simple styles. Add the following
CSS to a new file:
#travel { position:absolute; top:100px; }
#ball {
width:150px; height:150px; cursor:pointer;
background:url(../img/ball.jpg) no-repeat 0 0;
}
4. Save this as bounce.css in the css folder. When we run the page and click on the
ball we should find that it bounces along the page, gradually coming to a halt:
The previous composition shows the ball traveling across the page, bouncing up and down as
it goes from left to right.
What just happened?
When the ball is clicked, we first use jQuery's animate() method to animate the left style
property of the container by 300 pixels, over a duration of 2 seconds. We slow this animation
down to improve the appearance of the overall animation, but it is not strictly required. We
then navigate down to the inner element and use the effect() method, specifying
the bounce effect.
We need to use both elements because if we use the animate() and effect() methods
on the same element, the bounce effect will go into the element's animation queue and the
two animations will execute one after the other instead of running simultaneously.
[ 142 ]