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?

Artemisia

Did you include jQuery UI to get support for easings ? – Contrivance

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>

Redouble

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>

Actinon

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.

Matador

This is awesome! Thanks! – Schuyler

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

Dover