jQuery動畫或jQuery緩動？

Question

堅持與我在這一個。我試圖模仿CSS3過渡和（作爲一個例子），我很喜歡如何標誌進來，並做了「反彈」效應http://metalabdesign.com

我已經創建了一個快速jsFiddle關於我如何認爲這可能會jQuery動畫http://jsfiddle.net/EEtVs/但我真的不確定我是否應該使用jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/會是更好的路線。

我或多或少地尋找最好的方式來處理easeIn使用jQuery進行類型轉換。我在我的小提琴中走的路線是，我必須爲那些沒有啓用它的人指定一個非JS版本（我知道，每個人都應該，只是說），我希望它可以在所有瀏覽器中工作（不只是好的），這就是爲什麼我要去jQuery路線。

但是，我用我的jQuery方式看到的問題是我如何計算負面頂部定位以及如何影響實際的「過渡效果」。如果任何人有一個想法，我會如何創建類似的jQuery緩動（或更好的方式），我會非常感激。我在嘗試實施jQuery緩動方面做了很大的努力......所以現在真的陷入了泥潭。謝謝！

Answer 1

我加入了寬鬆插件您的jsfiddle，然後添加一個新的寬鬆型到你的電話.animate()：http://jsfiddle.net/jasper/EEtVs/1/

我也改變了你的動畫元素的top值，因爲它只需要足夠大在頁面加載時隱藏元素。

您可以通過更改「easeOutBounce」任何此頁面上的寬鬆類型的改變寬鬆型：http://gsgd.co.uk/sandbox/jquery/easing/

如果你想確保你的元素在關閉了JavaScript的瀏覽器顯示，運行在頁面的頭腳本，將一類這樣的HTML元素：

$('html').addClass('js'); 

現在你可以讓CSS的兩個版本供你蹦蹦跳跳地進視圖元素：

#heroElement { 
    position:relative; 
    top:0px; 
} 
.js #heroElement { 
    position:relative; 
    top:-60px; 
} 

這會將元素的頂部設置到頁面的頂部，除非啓用了JavaScript，在這種情況下該元素將被隱藏，直到JavaScript運行並顯示該元素。