javascript JQuery 淡出（函数（）{淡入}）；

JQuery fadeOut(function(){fadeIn});

提问by SliinQ

I have a problem with my webpage. I have 4 div's which should all fade in after the one before fades out. The code I use is:

我的网页有问题。我有 4 个 div，它们都应该在淡出之前淡入。我使用的代码是：

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

With #box1 > #box2 it works, with #box2 > #box3 it works but when I try to go from #box3 > #box4 sometimes #box3 fades out then fades in with #box4. I have No idea why it is doing this.

使用#box1 > #box2 可以工作，使用#box2 > #box3 可以工作，但是当我尝试从#box3 > #box4 开始时，有时#box3 会淡出然后用#box4 淡入。我不知道为什么要这样做。

Thanks,

谢谢，

http://jsfiddle.net/chLRa/4/now working. Sometimes when going from 3 to 4 it still fades in 3 and 4

http://jsfiddle.net/chLRa/4/现在工作。有时从 3 到 4 时它仍然会在 3 和 4 中消失

回答by Dzulqarnain Nasir

Here's a simple helper function to help you do this.

这里有一个简单的辅助函数可以帮助您做到这一点。

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

jsFiddle

js小提琴

回答by A. Wolff

I'd say try using finish()method:

我会说尝试使用finish()方法：

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

Maybe would be better in your case to use it after delay()

在您的情况下，在 delay() 之后使用它可能会更好

回答by DevlshOne

You may be better off using the callback version of those methods:

您最好使用这些方法的回调版本：

$('.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

js小提琴

回答by Lukas Liesis

jQuery official documentation says, that second param is not a callback, but easing style.

jQuery 官方文档说，第二个参数不是回调，而是缓动风格。

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

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

So just move your callback to 3rd paramand everything will work.

因此，只需将您的回调移动到第三个参数，一切都会正常进行。