Time for action – using the bounce effect

In this example we'll see how the jQuery UI effect can be combined to create a bouncing ball that travels across the page:

  1. Use the following simple elements in the <body> of the template file:
    <div id="travel">
  <div id="ball"><!-- --></div>
</div>
  2. All we need is a simple container <div> and an inner <div>. In the empty function at the end of the <body>, add the following script:
    $("#ball").click(function() {
  $("#travel").animate({
    left: "+=300px"
  }, 2000).find("div").effect("bounce");
});
  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) ...

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