jQuery fade out then fade in

jquery fadein fadeout
technopeasant picture technopeasant · Jun 9, 2011 · Viewed 108.4k times · Source

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!

Answer

Mark Kahn picture Mark Kahn · Jun 9, 2011

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

Related questions

jQuery add/remove Class with fadeIn/Out

I would to apply a fadeIn effect to a addClass function..and fadeOut to removeClass... Can you help me? This is my code $('#loader'+idTurno).addClass('loader'); ... $('#loader'+idTurno).removeClass('loader');

Read More
Fade In and Fade Out text inside a div

I have a div with a CSS style to show it as a button: <div id="Word1" class="btn green" onclick="WordClicked(1);">Word 1</div> And CSS styles: .btn { display: inline-block; background: url(btn.bg.png) repeat-x 0…

Read More
jQuery fadeIn fadeOut with click

I'm trying to make a div fadeIn when another div is clicked and fadeOut again when another div is clicked (which would be the close button) but my code doesn't work, did I forget something? Here's the CSS: body{ margin: 0; …

Read More