如何在轉換過程中更改Jquery的動畫持續時間？

Question

我如何改變jquery動畫方法的持續時間，使動畫開始緩慢，然後加速，然後再慢慢地結束？

感謝

Answer 1

可以包括jQueryUI，這對動畫的各種寬鬆政策選項。

http://jqueryui.com/demos/effect/#easing

---

例如：

DEMO：http://jsfiddle.net/f77BA/

$('div').animate(
    {'height':400}, 
    {easing:'easeInOutCubic',duration:2000});​ 

我要指出，你不需要整個jQueryUI的下載。他們的download page可以讓你自定義下載，所以我敢肯定，你可以包括核心來獲得緩解的影響。

Answer 2

有jQuery的一個插件緩和：http://gsgd.co.uk/sandbox/jquery/easing/

它有一個像30種不同類型的寬鬆政策。

您也可以使用多個這樣在一起：

$('#my-ele').animate({ left : 100 }, 500, 'easeInExpo', function() { 
    $(this).animate({ left : 500 }, 500, 'linear', function() { 
     $(this).animate({ left : 600 }, 500, 'EaseOutExpo'); 
    }); 
}); 

這使用回調函數.animate()函數來創建一個三部分組成的動畫，簡化的，然後線性動畫，然後緩出。

這裏是一個演示：http://jsfiddle.net/pPzhY/（另一個演示中，我前一陣子所做的看起來很不錯：http://jsfiddle.net/b6L8M/22/）