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

easeOutBounce effect is part of jquery UI plugin.

You have to include jquery UI too, or find an other plugin:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Answer 2

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>

Answer 3

Use this fragment of code, and place it after jQuery script. It is taken from official jQuery UI script. It is linked to this breaking change.

Do not use the complete library if you only need easing. The minified is still >250KB

( function() {

// Based on easing equations from Robert Penner (http://www.robertpenner.com/easing)

var baseEasings = {};

$.each( [ "Quad", "Cubic", "Quart", "Quint", "Expo" ], function( i, name ) {
    baseEasings[ name ] = function( p ) {
        return Math.pow( p, i + 2 );
    };
} );

$.extend( baseEasings, {
    Sine: function( p ) {
        return 1 - Math.cos( p * Math.PI / 2 );
    },
    Circ: function( p ) {
        return 1 - Math.sqrt( 1 - p * p );
    },
    Elastic: function( p ) {
        return p === 0 || p === 1 ? p :
            -Math.pow( 2, 8 * ( p - 1 ) ) * Math.sin( ( ( p - 1 ) * 80 - 7.5 ) * Math.PI / 15 );
    },
    Back: function( p ) {
        return p * p * ( 3 * p - 2 );
    },
    Bounce: function( p ) {
        var pow2,
            bounce = 4;

        while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
        return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
    }
} );

$.each( baseEasings, function( name, easeIn ) {
    $.easing[ "easeIn" + name ] = easeIn;
    $.easing[ "easeOut" + name ] = function( p ) {
        return 1 - easeIn( 1 - p );
    };
    $.easing[ "easeInOut" + name ] = function( p ) {
        return p < 0.5 ?
            easeIn( p * 2 ) / 2 :
            1 - easeIn( p * -2 + 2 ) / 2;
    };
} );

} )();

---

For additional info, this error might occur if using this legacy plugin with jQuery 3+ I'm not sure but I think it was in many Bootstrap templates.

Answer 4

include the following libraries on your html page

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Learn more on jquery UI