jQuery：如何創建一個jQuery懸停功能？

Question

我想創建兩個淡入淡出元素的函數。

這是我到目前爲止所做的，但問題在於，如果您在移動鼠標的同時處於懸停元素中，則會開始震動：我應該如何讓它不振動和正常工作？

<script language="javascript" type="text/javascript"> 
function hoverIn(target, speed){ 
    $(target).fadeIn(speed); 
} 

function hoverOut(target, speed){ 
    $(target).fadeOut(speed); 
} 
</script> 

LIVE PREVIEW - check out the problem in live

Answer 1

一個更好的辦法來做到這一點是使用不顯眼的腳本，你想更主要的是.stop()呼籲停止以前的動畫，就像這樣：

<script type="text/javascript"> 
function hoverIn(target, speed){ 
    $(target).stop(true, true).fadeIn(speed); 
} 

function hoverOut(target, speed){ 
    $(target).stop(true, true).fadeOut(speed); 
} 
</script> 

這仍然是一個問題，因爲mouseover和mouseout進入/離開小孩時會發生火災。然而，.hover()使用mouseenter和mouseleave不會遇到同樣的問題，並且會消除您的「振動」問題。

不顯眼的版本是這樣的：

$(function() { 
    $("ul > li").hover(function() { 
    $(this).find("ul").stop(true, true).fadeIn('fast'); 
    }, function() { 
    $(this).find("ul").stop(true, true).fadeOut('fast'); 
    }); 
});​ 

You can see it here，或者更短的版本：

$(function() { 
    $("ul > li").hover(function() { 
    $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast'); 
    }); 
});​ 

You can test that here，請注意，所有這些不顯眼的方法不使用任何內聯JavaScript，併爲多個兒童菜單工作。