How to add easing effect with animate in jquery?

Question

I am animating a div but i would like to give some effect to that animate so i tried like this

$('#slider').stop().animate({"margin-right": '0'}, 'slow','easeOutBounce');

easeOutBounce is not working for me.am i doing wrongly? But other than that all working.

I also tried jquery effect like below

$('#slider').stop().animate({"margin-right": '0'});
$('#slider').effect( "bounce", "slow" );

but,Here not even first line animate function working if i use effect

How to achieve bounce effect with animate?

Answer 1

I know the answer has been accepted, but I find jQuery UI too bulky just for just increased easing functions. I'd recommend using the smaller easings.net script at https://github.com/ai/easings.net. All you do is set the default easing function before calling jQuery's animate() (see the example). Exclude the easing parameter from the animate() method.

jQuery.easing.def = 'easeOutBounce';

$('#slider').animate({"margin-left": '200'}, 'slow');

#slider {
  width:100px;
  height:100px;
  background-color:#ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<div id="slider"></div>