0

CSS3 と jQuery の両方で、ハッシュ リンク ナビゲーションを実装できます。しかし、CSS3 でトランジションをアニメーション化することはできません。また、CSS3 ハッシュ リンクをサポートするブラウザーでオフにすることはできません。その結果、jQuery と CSS3 の両方が移動を行い、CSS3 が 10 回中 9 回勝ちます。

この最初のjsfiddleでは、ページをどのように見せたいか、ブラウザによって自動的にナビゲーションが行われます:

http://jsfiddle.net/mg7Bw/2/

この 2 番目の jsfiddle には同じページが含まれていますが、リンクが押されたときに派手なアニメーションを実行することになっている単純なスクリプトと共に jQuery がロードされていますが、ほとんどの場合遅すぎます。ただし、十分な回数クリックすると、アニメーションが 1 回または 2 回表示されます。

http://jsfiddle.net/XHSyV/

jQuery または CSS3 でトランジションを行うことには、長所と短所があります。ほとんどの場合、私は両方を持ちたいと思っています。ブラウザが CSS3 トランジションを実行できる場合は、送信するコードを大幅に減らします。ブラウザーが送信できない場合は、jQuery コードを送信します。しかし、何よりも、うまく機能する1つの方法が必要です。

4

2 に答える 2

1

modernizrを見てみましょう。タグに CSS クラスが追加されるhtmlため、ユーザーのブラウザーが CSS3 トランジションをサポートしているかどうかがわかります。

これらの行に沿って：

.csstransitions #someselector:hover {
    // do some fancy css3 transition here
}

$('.nocsstransitions #someselector').on('mouseover', function(){
    // do nifty jQuery animation
}
于 2012-04-29T23:49:59.820 に答える
1

ここで、jQuery に基づく 1 つの解決策を得ました。hashchange lib を localsscroll ライブラリに切り替え、それに応じてソースを変更します。次の jsfiddle を見てください。

http://jsfiddle.net/XHSyV/1/

追加する必要があるのは、ハッシュタグのアップデータのみです。

編集: hash:true を localScroll に追加すると、これが修正されました:

http://jsfiddle.net/XHSyV/2/

于 2012-04-30T10:11:13.973 に答える