當懸停功能工作時懸停

Question

雖然我的div滑動向下或向上滑動，如果我將鼠標移動到同一個div上，懸停效果會再次發生（甚至更多），如果該功能現在正在工作，該怎麼辦？我不應該重新啓動，直到我拿走鼠標並再次懸停？

<div id="hover">Hover on me<div id="hidden">You hovered!!</div></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

$(document).ready(function() { 
$('#hover').show(); 
$('#hidden').hide();  
$('#hover').hover(function() { 
    $('#hidden').slideDown(100); 
    }, function() { 
     $('#hidden').slideUp(100); 
    }); 
});​ 

Answer 1

你應該使用jQuery .stop()（API）見jsfiddle here。

你想要做的是改變你的懸停功能輕微。

添加在.stop()

$('#hover').hover(
    function() { 
     $('#hidden').slideDown(100); 
    }, function() { 
     $('#hidden').stop().slideUp(100); 
    } 
);