Hello Readers, this blog is on the bouncing effect using jquery in all directions(up, down , right and left).
I have created four round boxes, on clicking on a box each box will bounce in a different direction and a button on clicking that button all the boxes will bounce.
The Html code is written below. Copy and this code in your HTML file:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Bounce Effect</h2>
<div class="main">
<div class="wrapper">
<div id="direction-up" ><h5>On Click Bounce Up</h5></div>
<div id="direction-left"><h5>On Click Bounce Left</h5></div>
</div>
<div class="wrapper">
<div id="direction-right"><h5>On Click Bounce Right</h5></div>
<div id="direction-down"><h5>On Click Bounce Down</h5></div>
</div>
<br/>
<input id="direction-all" type="button" value="Click to Bounce All!" class="direction-all"/>
</div>
</body>
The CSS code is written below. Copy this code in your CSS file.
body, input{
font-family: Calibri, Arial;
}
div {
padding:5px;
width:150px;
float:left;
height:100px;
text-align:center;
}
h2{
text-align:center;
}
.main {
float:left;
margin-left:40%;
width:350px;
height:300px;
}
.wrapper {
float:left;
width:330px;
margin-bottom:5px;
}
.direction-all {
background-color:green;
text-align:center;
padding:5px;
color:white;
margin-top:15px;
}
#direction-up{
background-color:#FF5733;
margin-right:5px;
border-radius:50px;
}
#direction-left {
background-color:#33FF68;
border-radius:50px;
}
#direction-right {
background-color:#EE8888;
margin-right:5px;
border-radius:50px;
}
#direction-down {
background-color:#ED6DF5;
border-radius:50px;
}
Now include jquery files in your web page. copy below written code in between <head> </head> tags
<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>
Last but not the least, write jquery function after body tag is closed, in your web page:
<script>
$(function(){
$('#direction-right').click(function () {
$(this).effect("bounce", { direction:'right', times:10 }, 300);
});
$('#direction-left').click(function () {
$(this).effect("bounce", { direction:'left', times:10 }, 300);
});
$('#direction-down').click(function () {
$(this).effect("bounce", { direction:'down', times:10 }, 300);
});
$('#direction-up').click(function () {
$(this).effect("bounce", { times:10 }, 300);
});
$("#direction-all").click(function(){
$("div").click();
});
});
</script>
Comment: You can use Bounce effect with effect() method. This method helps in bouncing the element multiple times both vertically or horizontally. Here I gave the direction of the effect , default direction is up and then times to bounce , the default time is 5 and then speed. On click on button " Click to Bounce All", I have call the click function on each div, which results in bouncing all the divs simultaneously.
0 Comment(s)