jquery fade in callback not waiting

Question

im trying to make a div fade out and then have a second div fade in in its place but the callback for the second div to fade is doesn\'t seem to wait for the first to finish

Answer 1

you should try to alter the times, they are easing at the same speed:

$("#story2").fadeIn("1000", function(){ $("#story1").fadeOut("300"); });

try that :)

Answer 2

You're fading IN the new div before fading OUT the other div. That creates a cross fade effect so that's why you're seeing it. Perhaps what you mean to do is:

$("#story1").fadeOut("300", function () {
    $("#story2").fadeIn("300");
});

Fade out the current one before you fade in the next one. Then, you won't see them both on screen at the same time (e.g. no crossfade).

Answer 3

Check this out with example jsfiddle

$("#story1").fadeOut("300").delay(600,function(){$("#story2").fadeIn("300");})

Answer 4

You could try:
$("#story1").delay(500).fadeOut("300");