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!

score 84 · Accepted Answer · edited Apr 14 '22 at 23:04

84

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

edited Apr 14 '22 at 23:04

Cody Gray - on strike

239,200
50
490
574

answered Jun 09 '11 at 02:09

Ah, that's right. Thanks for the reminder. now that fadeOut has a function attached, where can I adjust it's speed? fadeIn's easy :) – technopeasant Jun 09 '11 at 02:16
7

`fadeOut('fast', function(){ ... })` or `fadeOut(200, function(){ ... })` – Jun 09 '11 at 02:17

rabbit.aaron · Answer 2 · 2015-12-23T01:37:59.287

5

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

edited Dec 23 '15 at 01:37

answered Nov 11 '15 at 05:02

rabbit.aaron

2,369
16
25

score 2 · Answer 3 · edited Dec 12 '13 at 12:18

2

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

edited Dec 12 '13 at 12:18

Dr1Ku

2,875
3
47
56

answered Feb 13 '13 at 16:09

Here is few more collection of fadein fadeout example http://webdevlopementhelp.blogspot.in/2009/09/jquery-fade-in-fade-out-effect.html – kiran Oct 21 '13 at 11:00

score 0 · Answer 4 · answered Dec 17 '19 at 15:47

0

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

answered Dec 17 '19 at 15:47

Flimm

136,138
45
251
267

jQuery fade out then fade in

4 Answers4

Linked