jQuery 如何在jquery中使用animate添加缓动效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16937627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add easing effect with animate in jquery?
提问by sun
I am animating a div but i would like to give some effect to that animate so i tried like this
我正在为 div 设置动画，但我想为该动画添加一些效果，所以我尝试这样
$('#slider').stop().animate({"margin-right": '0'}, 'slow','easeOutBounce');
easeOutBounceis not working for me.am i doing wrongly? But other than that all working.
easeOutBounce对我不起作用。我做错了吗？但除此之外，一切正常。
I also tried jquery effectlike below
我也试过像下面这样的jquery效果
$('#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?
如何用animate实现反弹效果？
回答by Victor Stoddard
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 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>回答by A. Wolff
easeOutBounceeffect is part of jquery UI plugin.
easeOutBounceeffect 是 jquery UI 插件的一部分。
You have to include jquery UI too, or find an other plugin:
您也必须包含 jquery UI，或者找到其他插件：
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
回答by Talha
include the following libraries on your html page
在您的 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>
Learn more on jquery UI
了解有关jquery UI 的更多信息
回答by micaball
Use this fragment of code, and place it after jQuery script. It is taken from official jQuery UIscript. It is linked to this breaking change.
使用这段代码，并将其放在 jQuery 脚本之后。它取自官方jQuery UI脚本。它与这一重大变化有关。
Do not use the complete library if you only need easing. The minified is still >250KB
如果您只需要缓动，请不要使用完整的库。缩小后仍然> 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 pluginwith jQuery 3+ I'm not sure but I think it was in many Bootstrap templates.
有关其他信息，如果将此旧插件与 jQuery 3+ 一起使用，可能会发生此错误我不确定，但我认为它在许多 Bootstrap 模板中。
