Bouncing effect in jQuery

Bouncing Effect with jQuery

We can create bouncing ball, div, button, etc. with the help of jQuery. It is very easy and can improve the user experience while making the screen interactive.

Here we will try to create a HTML page that has 4 boxes in a div. If we click on any of these boxes it will bounce in certain particular direction.

We can control the bouncing direction as well as the speed of bouncing element with the help of jQuery methods.

Live Demo

Click on individual colored boxes to see bounce effect.

Click here to bounce. Direction: Up	Click here to bounce. Direction: Left
Click here to bounce. Direction: Right	Click here to bounce. Direction: Down

Step 1:

Create a HTML page containing four boxes with the help of div element.

<!DOCTYPE html>
<html>
<head>
	<title>
Bounce effect using jQuery
	</title>
</head>
<body>
<table>
<tr>
	<td><div id="bounce-1">Click here to bounce. Direction: Up</div></td>
	<td><div id="bounce-2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
	<td><div id="bounce-3">Click here to bounce. Direction: Right</div></td>
	<td><div id="bounce-4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAllDiv" type="button" value="Click to Bounce All!"/>
</body>
</html>

Step 2:

Adding CSS to give the background color to each boxes.

<style type="text/css">

 #bounce-1, #bounce-2, #bounce-3, #bounce-4 {
     margin: 5px;
     padding:5px;
     width:150px;
     height:100px;
     text-align:center;
}
 #bounce-1 {
     background:cyan;
}
 #bounce-2 {
     background:orange;
}
 #bounce-3 {
     background:violet;
}
 #bounce-4 {
     background:floralwhite;
}

</style>

Step 3:

After adding CSS, we have to include jQuery and jQuery UI library for using methods for bounce effect.


<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Step 4:

Now to give bounce effect on each div we will use jQuery click function.

<script type="text/javascript">

	$( document ).ready(function() {

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

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

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

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

	//Bounce all DIVs on click of button
	$("#bounceAllDiv").click(function(){
		$("#bounce-1, #bounce-2, #bounce-3, #bounce-4").click();
	});
});

</script>

Step 5:

After merging all the above steps final code will be:

<!DOCTYPE html>
<html>
<head>
	<title>
Bounce effect using jQuery
	</title>
<style type="text/css">

#bounce-1, #bounce-2, #bounce-3, #bounce-4 {
            margin: 5px;
            padding:5px;
            width:150px;
            height:100px;
            text-align:center;
}
#bounce-1 {
	background:cyan;
}
#bounce-2 {
	background:orange;
}
#bounce-3 {
	background:violet;
}
#bounce-4 {
	background:floralwhite;
}

</style>
</head>

<body>
<table>
<tr>
	<td><div id="bounce-1">Click here to bounce. Direction: Up</div></td>
	<td><div id="bounce-2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
	<td><div id="bounce-3">Click here to bounce. Direction: Right</div></td>
	<td><div id="bounce-4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAllDiv" type="button" value="Click to Bounce All!"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<script type="text/javascript">

	$( document ).ready(function() {

	//Add bounce effect on Click of the DIV
	$('#bounce-1').click(function () {
		  $(this).effect("bounce", { direction:'up', times:5 }, "slow");
	});

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

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

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

	//Bounce all DIVs on click of button
	$("#bounceAllDiv").click(function(){
		$("div").click();
	});
});
</script>

</body>
</html>

About Me

Rahul Yadav

Technical Architect

Kuala Lumpur, Malaysia

Connect Me:

I'm a Full Stack Web Developer working in a MNC and passionate of developing modern web and mobile applications.

I have designed and developed CodephpOnline & CodephpOnline Wiki platform to expatiate my coding and technology learning experiences.

In my leisure time, I write technical articles on web development such as PHP, Laravel, CodeIgniter, Mediawiki, Linux, Angular, Ionic, ReactJS, NodeJS, AJAX, jQuery, Cloud and more.