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>


Ask Questions

Ask Question