Let us see how can we create a Bounce Effect in HTML pages using jQuery. Bounce effect is an effect which resembles bouncing of a ball on floor or on a wall. These kind of effects dramatically improve user experience.
Related:FadeIn / FadeOut Effect jQuery
Our Goal will be to create a HTML page that has 4 boxes (DIVs). Clicking each of these boxes will bounce them is a particular direction. We can control the direction as well as the speed of bouncing element with arguments to the method of jQuery.
Step 1: The HTML Code
Following will be the HTML code for our example:
<table><tr><td><divid="bouncy1">Click here to bounce. Direction: Up</div></td><td><divid="bouncy2">Click here to bounce. Direction: Left</div></td></tr><tr><td><divid="bouncy3">Click here to bounce. Direction: Right</div></td><td><divid="bouncy4">Click here to bounce. Direction: Down</div></td></tr></table><br/><inputid="bounceAll"type="button"value="Click to Bounce All!"/>
Step 2: The Stylesheet CSS Code
Just to add some color to our boxes, add following CSS code to your HTML:
Now we will give the actual bounce effect to the demo. We will use jQuery library for this. Also we need to include jQuery UI for bounce effect. For this we will include js files from google apis. Google host the jQuery UI and jQuery core files on their server. We can directly include it from there.