JQuery fadeOut(function(){fadeIn});

Question

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:

$(\'.btn\').click(function(){
    $         


        

Answer 1

I'd say try using finish() method:

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

Answer 2

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

Answer 3

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

Answer 4

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

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 param and everything will work.