2

これに固執してください。私はCSS3トランジションを模倣しようとしていますが、（例として）ロゴがどのように表示され、http：//metalabdesign.comで「バウンス」効果を発揮したかが非常に気に入りました。

これがjQueryアニメーションでどのように機能するかについて簡単なjsFiddleを作成しましたhttp://jsfiddle.net/EEtVs/ですが、jQueryEasinghttp: //gsgd.co.uk/sandboxを使用する必要があるかどうかは正直わかりません。ここでは/jquery/easing/がより適切なルートになります。

私は多かれ少なかれ、jQueryでeaseInタイプの遷移を処理するための最良の方法を探しています。私がフィドルで行ったルートは、それを有効にしていない人のために非JSバージョンを指定する必要があり（私は知っています、誰もが言うべきです）、すべてのブラウザで動作するようにしたいです（良いものだけではありません）それが私がjQueryルートに行く理由です。

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

4

1 に答える 1

0

イージングプラグインをjsfiddleに追加してから、新しいイージングタイプを.animate()呼び出しに追加しました：http：//jsfiddle.net/jasper/EEtVs/1/

topまた、アニメーション化する要素の値も変更しました。これは、ページの読み込み時に要素を非表示にするのに十分な大きさである必要があるためです。

'easeOutBounce'を次のページの任意のイージングタイプに変更することで、イージングタイプを変更できます：http：//gsgd.co.uk/sandbox/jquery/easing/

JavaScriptがオフになっているブラウザに要素が表示されるようにする場合は、ページの先頭で次のようなクラスをHTML要素に追加するスクリプトを実行します。

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

これで、バウンスする要素のCSSの2つのバージョンを表示できます。

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

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

于 2011-11-11T17:32:45.877 に答える