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')
    );

Answer 1

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