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

Question

当用户将鼠标悬停在另一个 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 消失然后出现然后淡出。你能告诉我是否有检查淡入是否完全完成的方法，然后才调用淡出函数。

任何帮助是极大的赞赏

Answer 1

stop执行此操作之前的动画。在此处阅读有关停止 jQuery 函数的信息。您必须停止动画以确保之前的动画完成。

另外，如果您想淡出（）某些东西，请这样做

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

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

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

Answer 2

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

$('#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);
});