jQuery fade out then fade in

Question

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

User · Accepted Answer

fade the other in in the callback of fadeout, which runs when fadeout is done. Using your code:

$('#two, #three').hide();
$('.slide').click(function(){
    var $this = $(this);
    $this.fadeOut(function(){ $this.next().fadeIn(); });
});

alternatively, you can just "pause" the chain, but you need to specify for how long:

$(this).fadeOut().next().delay(500).fadeIn();

User · Answer

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

User · Answer

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   lt img src      data secondImgUrl      alt   data secondImgAlt   gt          div1 fadeIn

User · Answer

This might help  http   jsfiddle net danielredwood gBw9j  Basically   this  fadeOut   next   fadeIn    is what you require

[jquery] jQuery fade out then fade in

Examples related to jquery

Examples related to fadein

Examples related to fadeout