jQueryアニメーションまたはjQueryイージング？

Question

この1つで私とスティック。私はCSS3のトランジションを模倣しようとしています（例として）ロゴがどのように入ってきたかがとても好きで、「バウンス」効果があったのですか？http://metalabdesign.com

これはうまくいくと思いましたjQueryのアニメーションhttp://jsfiddle.net/EEtVs/しかし、正直なところ私はjQueryイージングを使用する必要があるかどうか分かりませんhttp://gsgd.co.uk/sandbox/jquery/easing/ここでより良いルートになります。

jQueryを使用してeaseIn型のトランジションを処理する最良の方法を探しています。私は私のフィドルで行ったルートは、私はそれを有効にしていない人のための非JSバージョンを指定する必要があるだろう（私は知っている、誰もがちょうどsayin）、私はそれがすべてのブラウザで動作したい良いものばかりではない）、なぜ私はj​​Queryルートに行くのですか？

しかし、私がjQueryの方法で見ている問題は、負のトップポジションが計算され、どのように実際の「遷移効果」に影響するかということです。誰かがjQueryイージング（またはより良い方法）と似たようなものを作る方法を知っていれば、私は非常に感謝しています。私はjQueryのイージングを実装しようとするとかなり苦労しました...現時点では本当に泥の中に詰まっています。ありがとう！

Answer 1

私はあなたのjsfiddleに緩和プラグインを追加してから.animate()コールに新しい金融緩和の種類を追加しました：それだけで十分な大きさにする必要があるので、私はまた、あなたがアニメーション化している要素のtop値を変更しhttp://jsfiddle.net/jasper/EEtVs/1/

ページの読み込み時に要素を非表示にする。 http://gsgd.co.uk/sandbox/jquery/easing/

あなたの要素は、JavaScriptがオフになっているブラウザに示されていることを確認したい場合は、次のコマンドを実行します

は、このページでは緩和型のいずれかに「easeOutBounce」を変更することで、金融緩和の種類を変更することができますこのようなHTML要素にクラスを追加し、ページの頭の中のスクリプトは：

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

：

今

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

あなたはビューにバウンスしている要素のCSSの2つのバージョンを作ることができます

これは、JavaScriptが有効になっていない限り、要素の上部をページの上部に設定します。この場合、JavaScriptが実行されて要素が表示されるまで要素は非表示になります。