jQuery - correct way to wait for fade to finish

Question

I have a problem where I want to fade out an image, then move the image to an empty <li> container. However, the image doesn't fade, instead it just seems like the fade is being overridden by the move, using html().

Below is what I'm trying to do. Is there a way I can force the move to wait for the fade to complete?

// Fade out image to be replaced
mosaic_box.find('img').fadeTo(7000, 0.0)

// Then move the image
$('.mosaic_list li:empty', obj)
    .random(1)
    .html(mosaic_box.find('img')
        .addClass('mosaic_last_img')
    );

score 7 · Accepted Answer · answered Nov 22 '11 at 14:43

7

Do the move in the callback from the fadeTo function:

mosaic_box.find('img').fadeTo(7000, 0.0, function() { 
    $('.mosaic_list li:empty', obj)
     .random(1)
     .html(mosaic_box.find('img').addClass('mosaic_last_img'));
});

answered Nov 22 '11 at 14:43

Richard Dalton

35,513
6
73
91

Cheers @Richard D - only issue is that I now fade the image out, move it to an empty
, but my script no longer fades a new image in. I realise this is probably beyond the scope of my original question, but is there anything you can think of, just based on your amendment to my code, that might cause this?

Harry F

Nov 22 '11 at 15:00

Ah, got it fixed - i needed to wrap my next block of code, executing the fadeIn, inside the same anonymous function. – Harry F Nov 22 '11 at 15:36

Yeah, everything that you want to happen after the fadeOut has to happen inside the callback. – Richard Dalton Nov 22 '11 at 15:41

score 3 · Answer 2 · answered Nov 22 '11 at 14:43

Move your code into a function and pass that function to the callback param of fadeTo

function callback(){
                    // Then move the image
                    $('.mosaic_list li:empty', obj)
                    .random(1)
                    .html(mosaic_box.find('img')
                        .addClass('mosaic_last_img')
                        );
}

 // Fade out image to be replaced
 mosaic_box.find('img').fadeTo(7000, 0.0, callback)

score 2 · Answer 3 · answered Nov 22 '11 at 14:44

fadeTo(), as with most animation related methods, accept an optional callback argument which you can use to specify the function to run once the animation is completed.

To modify your code (untested):

// Fade out image to be replaced
mosaic_box.find('img').fadeTo(7000, 0.0, function() {
    // Then move the image
    $('.mosaic_list li:empty', obj)
        .random(1)
        .html(mosaic_box.find('img')
            .addClass('mosaic_last_img')
        );
});

score 2 · Answer 4 · answered Nov 22 '11 at 14:49

jQuery.fadeTo() has an optional callBack parameter.

http://api.jquery.com/fadeTo/

.fadeTo( duration, opacity [, callback] )

callback - A function to call once the animation is complete.

The simplest way to do this is using an anonymous function -

mosaic_box.find('img').fadeTo(7000, 0.0, function(){
    $('.mosaic_list li:empty', obj)
        .random(1)
        .html(mosaic_box.find('img')
        .addClass('mosaic_last_img');
    );
});

jQuery - correct way to wait for fade to finish

4 Answers4