0

だから私はこのナビゲーションをコーディングしようとしていて、マウスをあまりにも速く動かすと JQuery アニメーションが壊れたり、びくびくしたりすることを除いて、すべて機能しています。Safari の場合も非常に恐ろしく見えますが、アニメーションがほとんど点滅しているように見えますか?

$(document).ready(function() {

    // On hover:
    $('#navigation li').hoverIntent(function () {
        width = $(this).children('span:nth-child(2)').width();
        text = $(this).children('span:nth-child(2)');          

        var newwidth = (width + 15) // Original width + 15px padding        
        text.animate({"width":"0px"}, 0).show(); // Make the width 0px and make the element visible
        text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size

    },
    function () {
        text.animate({"width":"0px"}, 300); // Animate the width to 0px and hide the element
        text.animate({"width":+width+"px","float":"left"}, 0);
        setTimeout(function() {
            text.hide();
        }, 300);
    });

});

JFiddle は次のとおりです。

http://jsfiddle.net/d8g4w/

また、実際にどのように見えるかを確認できるライブ プレビュー:

http://dev.evaske.com/Navigation/

4

1 に答える 1

0

これが何をするか見てみましょう: jsFiddle

ulすぐに、マークアップが 100% 有効ではなく (ノードの直接の子としてのアンカー タグ)、「float」プロパティのアニメーション化が少し奇妙に感じられることに気付きました (jQuery がアニメーションをサポートしているかどうかさえわかりません)。 '浮く'）。クロスブラウザーの CSS 宣言の一部を削除しました (アニメーションとは関係がないようです)。CSS でカーソルを処理し、CSS と JS の組み合わせでホバーを処理していたので、実際にはアンカー タグは必要ありません。マウスクリックからトリガーする必要がある場合（これがナビゲーションの場合は、そうするはずです）、次を使用することをお勧めします。

$('#navigation li').on('click', function(){...}

私は .hover() の使用を避ける傾向があり、代わりにもっと依存しています

.on('mouseenter', function(){...}) と .on('mouseleave', function(){...})

私が通常ターゲットにしようとしている実際のイベントをより正確に表しているからです。

おそらく最大の改善は、 の.stop()前にメソッドを注入したことによるもの.animate()です。これにより、私が経験していたジッターが即座に軽減されたようです。滑らかさに関する限り、FF は依然として間違いなく最も弱いものですが (Safari と FF について言及されていたので、IE を試すことさえ気にしませんでした)、しゃっくりはもう見られませんでした。

于 2013-03-06T03:25:02.777 に答える