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>
