Question

页面顶部有三个小方框。当一个人在图片下方的图像上盘旋时，框会淡入。当从盒子上盘旋时，图像会淡出。但是如果它们在第一个盒子后面悬停在另一个盒子上它允许第一个图像在第二个图像消失之前淡出呢？谢谢。

$(document).ready(function(){
    $('#top p').mouseover(function(){
        $('#photo1').fadeIn(2000);
    });
    $('#top p').mouseout(function(){
        $('#photo1').fadeOut(2000);
    });
    $('#top2 p').mouseover(function(){
        $('#photo2').fadeIn(2000);
    });
    $('#top2 p').mouseout(function(){
        $('#photo2').fadeOut(2000);
    });
    $('#top3 p').mouseover(function(){
        $('#photo3').fadeIn(2000);
    });
    $('#top3 p').mouseout(function(){
        $('#photo3').fadeOut(2000);
    });
});

Answer 1

使用complete函数在一个函数完成时运行代码。例如，

$('#top p').mouseover(function(){
    $('#photo1').fadeIn(2000, function(){
        //This will run when the fadeIn is complete
    });
});

Answer 2

继承你的解决方案。在你的fadein之后直接进入。

setTimeout(function(){
        //Your fadeout function here
},3000)

setTimeout在执行函数之前设置延迟。我尝试使用delay（）但是没有用。我确定这对你有用.3000是执行前等待的时间（毫秒）。我通常将它设置为等于之前的fadein函数，这样一旦完成fadeout就会在setTimeout中开始。我喜欢使用setTimeout因为它比其他更广泛，我使用它比简单的淡入淡出更多的方式。

不要淡出直到fadeOut完成？

2 个答案: