jquery - jqueryでボックスの表示と非表示を切り替える

Question

絶対配置のニュースボックスがあります。ユーザーがその上にマウスを置くと、下の値をアニメーション化するスクリプトを作成しました。それでこれです。

(function(){
    var newsbox = $('div#news_div');

    newsbox.on('mouseover',function(){
        $(this).animate({'bottom':160},{duration:500});
        });
    newsbox.on('mouseleave',function(){
        $(this).delay(20000).animate({'bottom':55},{duration:500});
        });
    })();

そのため、マウスを何度も何度もすばやく表示すると、異常な動作が表示されます。教えてください。

Answer 1

次のアニメーションを開始する前に、現在再生中のアニメーションを停止するには、 stop()メソッドを使用します。

(function(){
    var newsbox = $('div#news_div');

    newsbox.on('mouseover',function(){
    $(this).stop().animate({'bottom':160},{duration:500});
    });
    newsbox.on('mouseleave',function(){
    $(this).stop().delay(20000).animate({'bottom':55},{duration:500});
    });
})();

Answer 2

アニメーションの前に停止を追加してみてください。これにより、リンクにすばやくカーソルを合わせると、アニメーション イベントの発生が停止します。

(function(){
    var newsbox = $('div#news_div');

    newsbox.on('mouseover',function(){
        $(this).stop().animate({'bottom':160},{duration:500});
        });
    newsbox.on('mouseleave',function(){
        $(this).delay(20000).stop().animate({'bottom':55},{duration:500});
        });
    })();