如何在jquery中使用animate添加缓动效果？

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>

Answer 2

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 3

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

Answer 4

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.