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

Question

我有一张照片和一张div.div是隐藏的(display:none;).我想在鼠标悬停在图片上时显示div,并在鼠标未在图片上方时再次隐藏div.我使用mouseenter()和mouseleave()事件来执行此操作,但当moue在图片上时,两个函数都重复工作.这是我定义函数的代码:`

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

我也尝试了悬停方法但结果是一样的.

$("#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事件是一个更好的解决方案.