0

アニメーションが完了した後にオブジェクトからクラスを削除することを想定したjQueryコードスニペットに取り組んでいます。これは私がこれまでに持っているものです：

$('.box').hover(function() {
        $(this).stop().addClass('active').animate({ 'margin-top': '-49px' }, 500);
    }, function() {
        $element = $(this);
        $(this).stop().animate({ 'margin-top': '0' }, 500, function() {
            $element.removeClass('active');
        });
    });

問題は、アニメーションが完了したときにクラスが削除されない場合があることです。これは、div間を移動する速度が速すぎる場合に発生します。

スライダーセクションの例を見ると、スライダー内に「City」、「House」、「Business」という3つのボックスがあります。

どんな助けでも大歓迎です。

PS同じことがメインナビゲーションでも起こります。サブナビゲーションがちょうどそこにぶら下がっている場合もあります。ナビゲーションのコードは次のとおりです。

$('#navigation ul li').hover(function(){
        $("a:eq(0)", this).addClass("hover");
        $(this).find('ul:eq(0)').stop(true, true).slideToggle();
        }, function(){
            $("a:eq(0)", this).removeClass("hover");
            $(this).find('ul:eq(0)').stop(true, true).slideToggle();
        }
    );
4

2 に答える 2

3

$element宣言をこれに変更します

var $element = $(this);
于 2012-03-17T14:45:35.473 に答える
1

主な問題は、おそらくそれ$elementが暗黙のグローバル変数であるという事実であるため、複数の.boxオブジェクトで同時にホバーアニメーションが実行されると、グローバル変数で互いの値を踏むことになります。それはvar $element = $(this)適切にローカル変数にする必要があります。または、以下の提案されたコードで示したように、その必要性を完全に排除することができます。

また、アニメーションが終了し.stop()たときに完了関数が呼び出されないため、非常に速く進むと、アニメーションの一部が停止し.stop()、完了関数が呼び出されなくなる可能性があります。状況に応じて、これは問題になる場合と問題にならない場合があります。

また、使用しているオプションにアクセスすることもできます。これは、少なくとも現在のアニメーションを停止するだけでなく、後で処理されないようにキューから削除するために.stop()使用したい場合が多いためです。.stop(true)

私はこの実装を提案します：

$('.box').hover(function() {
    $(this).stop(true).addClass('active').animate({ 'margin-top': '-49px' }, 500);
}, function() {
    $(this).stop(true).animate({ 'margin-top': '0' }, 500, function() {
        $(this).removeClass('active');
    });
});
于 2012-03-17T14:34:14.010 に答える