javascript - jQuery .hover() 未在鼠标悬停时完成

Question

我有一个 jQuery 列表设置为在事件<p class="results">中显示隐藏：<div>.hover()

<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
<script>
$(".results").hover(function() {
     $('#hidden').html(function() {
          [...put html here...]
     }).fadeIn(200);
}, function() {
     $("#hidden").hide();
})
</script>

问题是（我假设）因为如果用户快速从一个项目悬停在另一个项目然后完全离开，我有 200 毫秒的淡入<p>，第二个隐藏的<div>功能不会触发。我很确定我需要在其中的.stop()某个地方添加一些带有该方法的代码，但不确定如何实现它。有任何想法吗？

Answer 1

你几乎拥有它：

<p class="results">item1</p>
<p class="results">item2</p>
<p class="results">item3</p>
...
<div id="hidden">My popup here</div>
...
$(".results").hover(function() {
     $('#hidden').html(function() {
          [...put html here...]
     }).fadeIn(200);
}, function() {
     $("#hidden").stop().hide(); // <- important bit here
}

Answer 2

尝试：

<script>
$(".results").hover(function() {
    $('#hidden').stop().html(function() {
         [...put html here...]
    }).fadeIn(200);
}, function() {
    $("#hidden").stop().hide();
}
</script>

Answer 3

那么mouseenter，mouseleave呢？

http://jsfiddle.net/Yxv25/

$(".results").on('mouseenter',function() {
 $('#hidden').fadeIn(200);
}).on('mouseout', function() {
 $("#hidden").hide();
})​

编辑：

或者设置一个定时器，http://jsfiddle.net/Yxv25/1/

我不太确定你需要哪一个。