如何在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中添加動畫效果的緩動效果？

回答

相關問題