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

我动画一个div，但我想给到生命的一些影响，所以我试图像这样如何在jquery中添加动画效果的缓动效果？

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

easeOutBounce没有工作me.am我错在做什么？但除此之外，所有的工作。

我也试着像下面

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

但jQuery的效果，这里甚至没有一线动画功能工作，如果我使用效果

如何实现与动画效果反弹？

来源

2013-06-05 sun

是否包含jQuery的用户界面得到了渐变效果的支持？ – adeneo

没有adeneo，感谢您的帮助:) – sun

效果是jQuery UI插件的一部分。

你必须包括jQuery UI的过，或者找到其他插件：

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

来源

2013-06-05 10:36:50

包含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-05 10:41:50 Talha

我知道答案已被接受，但我发现jQuery UI太笨重，仅仅是为了增加缓动功能。我建议使用较小的easings.net脚本https://github.com/ai/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>

来源

2017-01-21 22:30:26

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

回答

相关问题