Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 841
technopeasant Avatar asked Jun 09 '11 02:06

technopeasant


1 Answers

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(); 
like image 132
Nobody Avatar answered Sep 22 '22 01:09

Nobody