Jquery Easing Bounce Example - Jquery

How to get easing bounce effect in jquery?

Snippet Code

Rate this page :
  [ 0 votes]

Simple jquery easing code creates an bounce effect to look better. Easing bounce code allows you to specify the speed of animation. You need jQuery UI easing function to run this code.

<script src='https://code.jquery.com/jquery-1.11.1.min.js'></script> <script src='http://code.jquery.com/ui/1.9.2/jquery-ui.js'></script> <script> $( document ).ready(function() { $('button').click(function(){ $('div.demo').animate({ "top" : "+=100px" }, 400, "easeOutBounce"); }); }); </script> <style> .demo { background: red; width: 100px; height: 100px; position: absolute; top: 20px; left: 45%; } </style> <button>Click To Bounce</button> <div class='demo'></div>


Ask Questions

Ask Question