将鼠标悬停在图像上太快会出现故障答案

【问题标题】：hovering over image too fast does an glitch将鼠标悬停在图像上太快会出现故障
【发布时间】：2013-10-21 04:42:13
【问题描述】：

当用户将鼠标悬停在另一个 div 上时，我尝试显示一些 div，并且我尝试使用 fadeIn 并为其提供速度。我还试图移动另一个 div。代码如下-

 $('#boardpicture2').hover(function() {

    $('#boardpicture3').stop().animate({'margin-left': '200px'},500 );
        $('#boardpicture6').fadeIn(1000);
}, function() {
     $('#boardpicture3').stop().animate({'margin-left': '0'},1000 ); 
     $('#boardpicture6').fadeOut(500);
});

但是现在如果我尝试快速将鼠标悬停在 div 上（我的意思是，如果我在淡入完成之前将鼠标移出 div，那么 boardpicture6 就会消失，然后又出现然后淡出。你能告诉我是否有一种方法可以检查fadeIn 是否完全完成，然后才调用fadeOut 函数。

非常感谢任何帮助

【问题讨论】：

你可以为它制作一个样品吗？小提琴。 :)

标签： jquery jquery-animate

【解决方案1】：

stop 执行此操作之前的动画。阅读停止 jQuery 函数here。您必须停止动画以确保之前的动画完成。

另外，如果你想淡出（）一些东西，这样做

$(something).hide().fadeOut();

这将确保在调用 fadeOut 函数时隐藏元素。总之，

$(something).stop().hide().fadeOut();

【讨论】：

【解决方案2】：

您可以使用.stop(true, true)强制jQuery停止完成现有动画fadeIn

$('#boardpicture2').hover(function() {
    $('#boardpicture3').stop().animate({'margin-left': '200px'},500 );
    $('#boardpicture6').stop(true, true).fadeIn(1000);
}, function() {
    $('#boardpicture3').stop().animate({'margin-left': '0'},1000 ); 
    $('#boardpicture6').stop(true, true).fadeOut(500);
});

【讨论】：