如何解决这个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具有相同的处理程序，这会减少您的代码。