如何解决这个jQuery问题

Question

我有2个div比较高,在给定的时刻显示一个而另一个被隐藏,当鼠标进入#div1时脚本应该显示#div2,当鼠标离开时应该显示#div1#div2

当鼠标进入#div1并且在显示#div2之前离开时出现问题,所以#div2将保持显示但是鼠标已经离开了#div2任何帮助？

我的jQuery代码:

$('#div1').mouseenter(function(){
 $('#div1').fadeOut("fast",function(){
  $('#div2').fadeIn("fast");
 });
});

$('#div2').mouseleave(function(){
 $('#div2').fadeOut("fast",function(){
  $('#div1').fadeIn("fast");
 });
});

Answer 1

我建议hover()在这里使用:

$("#div1, #div2").hover(function() {
  $(this).stop().fadeOut("fast");
}, function() {
  $(this).stop().fadeIn("fast");
});

注意:我已经习惯stop()了动画,这是一个很好的习惯.上面的版本还允许两个div具有相同的处理程序,这会减少您的代码.