In this example we'll see how the jQuery UI effect can be combined to create a bouncing ball that travels across the page:
Use the following simple elements in the
<body>of the template file:<div id="travel"> <div id="ball"></div> </div>
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" }, 1500).find("div").effect( "bounce", { times: 4, distance: 100 }, 1500 ); });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; }Save this as
bounce.cssin thecssfolder. When we run the page and click on the ball, we should find that it bounces along the page...