Mouseout和Mouseenter jquery函數

-1

我使用了jQuery mouseout和mouseenter函數。但是工作不好。因爲當你快速過去的項目。我得到了嚴厲的效果。我使用此代碼：Mouseout和Mouseenter jquery函數

$('.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 }); 
    });

我該如何解決我的問題？

來源

2011-11-07 Mike Vierwind

你說你用'mouseout'和'mouseenter'但你的代碼包含'mouseout'和'mouseover'。 – Sparky

我.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 }); 
});

來源

2011-11-07 21:37:27 Seth

感謝您的幫助！ –

.mouseover() and .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/

來源

2011-11-07 21:37:08 Sparky

集中的一些變量，互斥體，如：

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 }); 
    });

來源

2011-11-07 21:37:40 pomaxa

問題的淵源不mouseout或mouseover事件。他們正在努力工作。這意味着即使您將鼠標懸停在1ms的元素上，它也可以工作。

此問題的解決方案是延遲此操作。你應該等待一定的毫秒數來完成你想要的事情。

您可以手動執行此操作，也可以只使用jQuery hover intent plug來執行此操作，該操作非常簡單易用。

最好是不要使用mouseout或mouseover事件，並使用jQuery .hover()（如果你使用的是插件.hoverIntent()的更乾淨和可讀的代碼。

來源

2011-11-07 21:39:26 Mohsen

Mouseout和Mouseenter jquery函數

回答

相關問題