replaceWith() while elements fadeOut() and fadeIn() in JQuery

Question

What I'm trying to do is simply, fadeout all images inside containers, replace #next1's image to #active and after that fadein all images again.

here is my code:

$('.logo').fadeOut('slow', function() {
    $('#active>img').replaceWith( $('#next1>img') );
}).fadeIn('slow', function() {});

this does not work. i found myself looking at the empty #active

but this however;

$('.logo').fadeOut('slow', function() {}).fadeIn('slow', function() {});
$('#active>img').replaceWith( $('#next1>img') );

makes the replacing just fine but not the animation i'm trying to do.

i get same results with both chrome and ie.

Answer 1

My suggestion here would be to look at the promise/done methods in jQuery. As an example here you could do something like:

$('.logo').fadeOut('slow').promise().done(function(logo) {
    $('#active>img').replaceWith($('#next1>img'));
    $(logo).fadeIn('slow');
});

jQuery promise - http://api.jquery.com/promise/

Answer 2

Try:

$('.logo').fadeOut('slow', function() {
    $('#active>img').replaceWith( $('#next1>img') );
    $(this).fadeIn('slow');
});

Assuming what you want to achieve is fading out, then replacing the content while .logo is hidden, then fading in after the logo is replaced.