如何在 jquery 中使用动画添加缓动效果？答案

【问题标题】：How to add easing effect with animate in jquery?如何在 jquery 中使用动画添加缓动效果？
【发布时间】：2013-06-05 10:32:51
【问题描述】：

我正在为一个 div 设置动画，但我想对该动画添加一些效果，所以我尝试了这样

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

easeOutBounce 对我不起作用。我做错了吗？但除此之外一切正常。

我也试过jquery 效果如下

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

但是，如果我使用效果，这里甚至没有第一行动画功能工作

如何用动画实现弹跳效果？

【问题讨论】：

你是否包含了 jQuery UI 以获得对缓动的支持？
没有 adeneo，感谢您的帮助:)

标签： jquery jquery-animate jquery-effects jquery-easing

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

使用这段代码，并将其放在 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;
    };
} );

} )();

有关其他信息，如果在 jQuery 3+ 中使用 this legacy plugin 可能会出现此错误，我不确定，但我认为它出现在许多 Bootstrap 模板中。

【讨论】：

这太棒了！谢谢！

【解决方案3】：

easeOutBounce 效果是 jquery UI 插件的一部分。

你也必须包含 jquery UI，或者寻找其他插件：

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

【讨论】：

【解决方案4】：

在您的 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

【讨论】：