JQuery fadeOut(function(){fadeIn});
11,536
Solution 1
Here's a simple helper function to help you do this.
function fade(thisIn, callback){
boxes.not(thisIn).filter(':visible').delay(5000).fadeOut('slow', function(){
thisIn.fadeIn('slow', callback);
});
}
Solution 2
I'd say try using finish() method:
$('.btn').click(function(){
$('#box3').finish().delay(5000).fadeOut('slow', function(){
$('#box4').fadeIn('slow');
});
});
Maybe would be better in your case to use it after delay()
Author by
Admin
Updated on June 17, 2022Comments
-
Admin almost 2 years
I have a problem with my webpage. I have 4 div's which should all fade in after the one before fades out. The code I use is:
$('.btn').click(function(){ $('#box3').delay(5000).fadeOut('slow', function(){ $('#box4').fadeIn('slow'); }); });
With #box1 > #box2 it works, with #box2 > #box3 it works but when I try to go from #box3 > #box4 sometimes #box3 fades out then fades in with #box4. I have No idea why it is doing this.
Thanks,
http://jsfiddle.net/chLRa/4/ now working. Sometimes when going from 3 to 4 it still fades in 3 and 4
-
codedme almost 11 yearsfinish method has been added from 1.9 stop(true,true) can be used in previous versions
-
Karl-André Gagnon almost 11 years@KevinB same, but i don't really get the difference with stop. Is it the same thing?
-
codedme almost 11 years.finish() also causes the CSS property of all queued animations to jump to their end values, as well.api.jquery.com/finish
-
Admin almost 11 yearsThanks but that didn't work, now the delay doesn't work on #box4 and #box3 still fades in after the delay.
-
Admin almost 11 yearsI have made it so that every box has a separate button to fadeout itself and fadein the next one. This way they all fadeOut fadeIn with only one button
-
DevlshOne almost 11 yearsMy solution only has one button, as well. Did you look at my fiddle?
-
Admin almost 11 yearsMy site has 1 button every box, total 4 buttons. Every button fades in another div. I have updated my fiddle with a working example