jQuery mouseenter() 和 mouseleave() 函数重复工作

Question

我有一张图片和一个 div。 div 被隐藏(显示:无；)。我想当鼠标悬停在图片上时显示 div，并在鼠标不在图片上时再次隐藏 div。我使用 mouseenter() 和 mouseleave() 事件来执行此操作，但是当鼠标悬停在图片上时，这两个函数会重复工作。这是我定义函数的代码:`

$("#pic").mouseenter(function(){
  $("#checkin").slideDown();
});
$("#pic").mouseleave(function(){
  $("#checkin").slideUp();
});

我也尝试了hover方法，但结果是一样的。

$("#pic").hover(
  function(){
    $("#checkin").slideDown(200);
  },
  function(){
    $("#checkin").slideUp(200);
  }
);

什么问题，我不明白。

更新:这是 HTML 代码

<tr><td valign='top' class='checkinpic'><img src='img.png' id='pic' height='100%'></td></tr>

...

<div id='checkin'>
You are not going to any activity this week.
</div>

Answer 1

我找到了解决方案。当我更改与 mouseleave 事件配合使用的元素时，它起作用了:

var block = false;
$("#pic").mouseenter(function(){
if(!block) {
    block = true;
    $("#toggleDiv").slideDown(400, function(){
        block = false;
    });
}
});
$("#pic").mouseleave(function(){
if(!block) {
    block = true;
    $("#toggleDiv").slideUp(400, function(){
        block = false;
    });
}
});

感谢您的帮助。

更新:我注意到给图片和div都指定一个类并定义该类的mouseenter和mouseleave事件是一个更好的解决方案。