Question

我正在动画一个div，但我想对那个动画效果如此我试试这样

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

easeOutBounce 对我不起作用。我做错了吗？但除此之外全部工作。

我也尝试了jquery 效果，如下所示

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

但是，如果我使用效果

，这里甚至不能使用第一行动画功能

如何使用animate实现反弹效果？

Answer 1

我知道答案已被接受，但我发现jQuery UI太庞大，只是为了增加缓动功能。我建议在https://github.com/ai/easings.net使用较小的easings.net脚本。你所要做的就是在调用jQuery的animate（）之前设置默认的缓动函数（参见示例）。从animate（）方法中排除缓动参数。

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效果是jquery UI插件的一部分。

您还必须包含jquery UI，或者找到其他插件：

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

Answer 3

在您的html页面上包含以下库

  <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>

详细了解 jquery UI

Answer 4

使用此代码片段，并将其放在jQuery脚本之后。它取自官方jQuery UI脚本。它链接到this breaking change。

如果只需要放松，请不要使用完整的库。缩小后的大小仍为> 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;
    };
} );

} )();

有关其他信息，如果不确定将this legacy plugin与jQuery 3+一起使用，则可能会发生此错误，但我认为它在许多Bootstrap模板中都存在。

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

4 个答案: