4

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

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

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

我也试过像下面这样的jquery效果

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

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

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

4

4 回答 4

8

我知道答案已被接受，但我发现 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>

于 2017-01-21T22:30:26.990 回答
7

使用这段代码，并将其放在 jQuery 脚本之后。它取自官方jQuery UI脚本。它与这一重大变化有关。

如果您只需要缓动，请不要使用完整的库。缩小后仍>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+ 一起使用，则可能会发生此错误，我不确定，但我认为它存在于许多 Bootstrap 模板中。

于 2019-12-19T23:05:01.767 回答
5

easeOutBounceeffect 是 jquery UI 插件的一部分。

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

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
于 2013-06-05T10:36:50.173 回答
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的更多信息

于 2013-06-05T10:41:50.803 回答