Jquery Bounce Animation Example - Jquery
How to give bounce effect to a div using jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Bounce effect for an element is done through hover function. JQuery animate() property is used to produce bounce effect.
<script type="text/javascript">
$(document).ready(function() {
$("#bouncediv a").hover(function() {
$(this).stop().animate({ marginTop: "-20px" }, 300);
$(this).parent().find("span").stop().animate({ marginTop: "8px", opacity: 0.25 }, 200);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 300);
$(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
});
});
</script>
<style>
#bouncediv a {
width: 60px;
height: 60px;
background-color:red;
display: block;
border:1px solid red;
border-radius:30px;
}
</style>
<center><b>Jquery Bounce Animation</b></center></br></br>
<div id="bouncediv" align='center'>
<a href="#"></a>
</div>
