Mouseout和Mouseenter jQuery函數

Question

我使用了jQuery mouseout和mouseenter函數。 但是效果不好。 因為當您快速瀏覽項目時。 我得到瘋狂的效果。 我使用以下代碼：

$('.hover').css('opacity', 1);
    $('.controlNav li').mouseover(function() {
        $('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1 }, 450, 'swing' );
    }).mouseout(function(){
        $('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
    });

我該如何解決我的問題？

Answer 1

我在動畫之前添加了.stop() ，它將在適當位置停止動畫並應停止跳躍。

$('.controlNav li').mouseover(function() {
    $('.hover', this).css({ display: 'block' }).stop().animate({ top: -73, opacity: 1 }, 450, 'swing' );
}).mouseout(function(){
    $('.hover', this).css({ display: 'none' }).stop().animate({ top: -60, opacity: 0 });
});

Answer 2

最初的問題不是出mouseout或mouseover事件。 他們正在努力工作。 這意味着即使您將鼠標懸停在元素上僅1ms它也將起作用。

解決此問題的方法是延遲操作。 您應該等待一定的毫秒數才能完成所需的操作。

您可以手動執行此操作，也可以只使用jQuery懸浮意圖插件實現該非常好用的操作。

最好不要使用mouseout或mouseover事件，而應使用jQuery .hover() （如果您使用.hoverIntent()的插件獲取更清晰易讀的代碼）。

Answer 3

.mouseover()和.mouseout()給出奇怪的結果，因為當鼠標仍位於元素內時， mouseover()會觸發多次。 簡單的鼠標移動將一次又一次觸發它。

.mouseenter()和.mouseleave()更好，因為它們只能在進入或離開元素時觸發一次。 但是，它們似乎仍不如.hover()那樣好，后者將它們組合為一個方法。

另外，添加.stop()將在開始新動畫之前停止當前動畫。 .stop(true, false)將清除動畫隊列中的所有內容，並且不允許當前動畫完成。

$('.controlNav li').hover(
    function() {
        $('.hover', this).css({ display: 'block' }).stop(true, false).animate({ top: -73, opacity: 1 }, 450, 'swing' );
},
    function() {
        $('.hover', this).css({ display: 'none' }).stop(true, false).animate({ top: -60, opacity: 0 });
});

http://api.jquery.com/hover/

http://api.jquery.com/stop/

Answer 4

將一些變量設置為互斥體，例如：

var isActive = false;
('.hover').css('opacity', 1);
    $('.controlNav li').mouseover(function() {
        if(isActive) return false;
        isActivce = true;
        $('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1, complete: function(){isActive = false} }, 450, 'swing' );
    }).mouseout(function(){
        $('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
    });