当悬停功能工作时悬停

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