Question

我有一个<p class="results">列表，jQuery设置为在<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>

问题在于（我假设），因为如果用户在项目之间快速悬停然后完全离开<p>，我有200ms的淡入淡出，第二个隐藏<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/

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

jQuery .hover（）没有在mouseout上完成

3 个答案: