[jquery] jQuery fade out then fade in

There's a bunch on this topic, but I havn't found an instance that applies well to my situation.

Fade a picture out and then fade another picture in. Instead, I'm running into an issue where the first fades out and immediately (before the animation is finished) the next fades in.

I read about this once and can't remember exactly what the trick was..

http://jsfiddle.net/danielredwood/gBw9j/

thanks for your help!

With async functions and promises, it now can work as simply as this:

async function foobar() {
  await $("#example").fadeOut().promise();
  doSomethingElse();
  await $("#example").fadeIn().promise();
}

This might help: http://jsfiddle.net/danielredwood/gBw9j/
Basically $(this).fadeOut().next().fadeIn(); is what you require

After jQuery 1.6, using promise seems like a better option.

var $div1 = $('#div1');
var fadeOutDone = $div1.fadeOut().promise();
// do your logic here, e.g.fetch your 2nd image url
$.get('secondimageinfo.json').done(function(data){
  fadeoOutDone.then(function(){
    $div1.html('<img src="' + data.secondImgUrl + '" alt="'data.secondImgAlt'">');
    $div1.fadeIn();
  });
});