Fantastic Bouncy Effect using jQuery/JavaScript
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

The Goal

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><div id="bouncy1">Click here to bounce. Direction: Up</div></td>
 <td><div id="bouncy2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
 <td><div id="bouncy3">Click here to bounce. Direction: Right</div></td>
 <td><div id="bouncy4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAll" type="button" value="Click to Bounce All!"/>

Code language: HTML, XML (xml)

Step 2: The Stylesheet CSS Code

Just to add some color to our boxes, add following CSS code to your HTML: 
div {
 padding:5px;
 width:150px;
 height:100px;
 text-align:center;
}
#bouncy1 {
 background-color:#FFEE88;
}
#bouncy2 {
 background-color:#EE88FF;
}
#bouncy3 {
 background-color:#EE8888;
}
#bouncy4 {
 background-color:#88EEFF;
}

Code language: CSS (css)

Step 3: The jQuery/JavaScript Code

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. 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

Code language: HTML, XML (xml)
Also copy following code in your HTML to give final bounce effect. 
$(function(){

 //Add bounce effect on Click of the DIV
 $('#bouncy1').click(function () {
    $(this).effect("bounce", { times:5 }, 300);
 });

 $('#bouncy2').click(function () {
    $(this).effect("bounce", { direction:'left', times:5 }, 300);
 });

 $('#bouncy3').click(function () {
    $(this).effect("bounce", { direction:'right', times:5 }, 300);
 });

 $('#bouncy4').click(function () {
    $(this).effect("bounce", { direction:'down', times:5 }, 300);
 });

 //Bounce all DIVs on click of button
 $("#bounceAll").click(function(){
  $("div").click();
 });
});

Code language: JavaScript (javascript)

Online Demo

View Demo Download

View Comments

  • *Bounces up and down with joy* great! learned something new in jquery ^_^ very easy to understand what is going on even for a total jquery beginner like myself :)

  • That's great. Is there a way to have the div bounce automatically, say once every five seconds instead of on a click?

    • Why not.. just use JavaScript's setTimeout() function.

      [code language="js"]
      function bounce() {
      $(this).effect("bounce", { times:5 }, 300);
      setTimeout("bounce();", 5000);
      }

      bounce();
      [/code]

      • Thanks for the nice tutorial !

        I think your provided code for requested question is not correct, he is asking for automatically calling function after certain interval. I guess its code should be like -

        [code language="html"] $("#dv5").click(function () {
        JumpMeAuto();
        });

        function JumpMeAuto() {
        $("#dv5").effect("bounce", {direction:'right', times: 5 }, 300);
        self.setInterval(function(){JumpMeAuto()}, 5000);
        } [/code]

        • your code is exactly the same except you begin it by clicking where his begins on page load. the guy did not specify it should begin after clicking. good on you for reinventing the wheel...

  • Hi Friend,

    thank you so much for very good tutorial.
    Is there any way to add bouncy effect to part of a element, I click?(For example consider a background image, i want to add dynamic bouncy effect to part of a background image)

    Thanks Best Regards,
    PSP

Leave a Comment
Share
Published by
Viral Patel
Tags: JQuery jQuery Effects
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

5 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

5 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

5 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

5 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago