jQuery fadeOut（function（）{fadeIn}）;

Question

我的网页有问题。 我有4个div，所有这些都应该在淡入淡出之后逐渐淡入。 我使用的代码是：

$('.btn').click(function(){
    $('#box3').delay(5000).fadeOut('slow', function(){
        $('#box4').fadeIn('slow');
    });
});

使用＃box1>＃box2可以使用，使用＃box2>＃box3可以使用，但是当我尝试从＃box3>＃box4转到时，有时＃box3淡出然后使用＃box4淡入。 我不知道为什么要这么做。

谢谢，

http://jsfiddle.net/chLRa/4/现在可以使用了。 有时，当从3变为4时，它仍会在3和4中消失

Answer 1

这是一个简单的帮助程序功能，可以帮助您完成此操作。

function fade(thisIn, callback){
    boxes.not(thisIn).filter(':visible').delay(5000).fadeOut('slow', function(){
        thisIn.fadeIn('slow', callback);
    });
}

jsFiddle

Answer 2

我会说尝试使用finish（）方法：

$('.btn').click(function(){
    $('#box3').finish().delay(5000).fadeOut('slow', function(){
        $('#box4').fadeIn('slow');
    });
});

在您的情况下，最好在delay（）之后使用它

Answer 3

使用这些方法的回调版本可能会更好：

$('.btn').click(function(){
    $('#box1').fadeOut('slow', function() {
        $('#box2').fadeIn('slow', function() {
            $('#box2').fadeOut('slow', function() {
                $('#box3').fadeIn('slow', function() {
                    $('#box3').fadeOut('slow', function() {
                        $('#box4').fadeIn('slow', function() {
                            $('#box4').fadeOut('slow');
                        });
                    });
                });
            });
        });
    });
});

jsFiddle

Answer 4

jQuery官方文档说，第二个参数不是回调，而是缓和样式。

http://api.jquery.com/fadeIn/#fadeIn-duration-easing-complete http://api.jquery.com/fadeOut/#fadeOut-duration-easing-complete

$('#el').fadeOut(750,'swing',function(){
    $('#el').fadeIn();
});

因此， 只需将回调移至第3个参数 ，一切便会正常进行。