用jQuery加速移動元素

Question

移動物體很安靜簡單。想象一下：

$("#myelement").animate({left:'+=200'},2000); 

問題是我希望我的元素開始緩慢地移動並且不斷加速。

有沒有人有線索如何做到這一點？

Answer 1

http://gsgd.co.uk/sandbox/jquery/easing/

您需要使用jQuery的寬鬆插件，並使用緩解選項。我推薦'easeInExpo'，但你可以在這裏看到所有的選擇：http://jqueryui.com/demos/effect/easing.html

如果你需要的只是緩解，我認爲jQuery ui（它有內置的插件）是矯枉過正的。您可以使用精簡形式的插件。

這將是這個樣子：

$("#myelement").animate({left:'+=200'},2000, 'easeInExpo'); 

您可能還喜歡 'easeInCubic'

Answer 2

緩解

.animate的其餘參數（）是一個字符串命名的緩動函數使用。緩動函數指定動畫在不同點處進行動畫的速度。 jQuery庫中唯一的緩動實現是默認的，稱爲swing，並且以恆定的速度前進，稱爲線性。通過使用插件，最顯着的是jQuery UI套件，可以使用更多的緩動功能。

這是你需要什麼？

Answer 3

animate函數有一個緩動選項。您可以加載預先定義的一個或制定出您自己的要完成所需的影響。

These是一些預構建的，我用的很不錯。