-1

私はかなり単純なjqueryコードを持っています：

 $(document).ready(function(){
        $('img.marqFl').on({
            mouseenter: function() {
                $(this).animate({height: 300}, 600);
            },
            mouseleave: function() {
                $(this).animate({height: 150}, 600);
            }
        }); 

    });

しかし、それは私が望むことをしていません。

同じクラスの画像が10枚あります-marqFl。それらはすべて150の高さを持っています。ユーザーが画像の上にマウスを移動すると、高さが300に増加し始めるはずです。

ただし、マウスを画像から移動すると、マウスは停止して150に戻り始めます。また、マウスを画像に戻すと、マウスは減少を停止し、再び増加し始めます。どちらの場合も、古いアニメーションを壊す必要があります。ユーザーは、前のアニメーションが終了して新しいアニメーションを開始するのを待つべきではありません。

マウスを他の画像に移動した場合、最初の1つは直接（アニメーションなしで）150に移動する必要があり、新しい画像が増加し始めるはずです。

4

2 に答える 2

5

停止機能を使用します。

$(this).stop().animate({height: 300}, 600);
于 2012-07-01T09:30:07.833 に答える
1

追加するだけstop()です：

 $(document).ready(function(){
        $('img.marqFl').on({
            mouseenter: function() {
                $(this).stop().animate({height: 300}, 600);
            },
            mouseleave: function() {
                $(this).stop().animate({height: 150}, 600);
            }
        }); 

    });
于 2012-07-01T09:30:11.843 に答える