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上（我的意思是如果我在fadeIn完成之前将鼠标移出div，那么boardpicture6就会消失然后再显示出来然后淡出。你能告诉我是否有一种方法可以检查fadeIn是否完全完成，然后再调用fadeOut函数。

非常感谢任何帮助

Answer 1

在执行此操作之前

stop动画。阅读有关停止jQuery函数here的信息。您必须停止动画以确保完成上一个动画。

此外，如果你想fadeOut（）的话，就像这样做

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

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

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

Answer 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);
});

将图像悬停在图像上太快就会出现故障

2 个答案: