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 fading, in fact they both fade at the same time giving a cross fade effect father than a fade out and then in afterwards. heres the code:

$(document).ready(function () {

    //toggle story text
    $(function () {
        $("#imageGallery").scroll(function () {

            if ($(this).scrollLeft() > 1000) {

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


            } else {

                $("#story1").fadeIn("slow");
                $("#story2").fadeOut("slow");
            }
        });

    })

});

and the page im using it in:

http://www.jonathantopf.com/imijstudio/

any ideas why this is happening?

Answer 1

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 2

Check this out with example jsfiddle

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

Answer 3

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

Answer 4

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

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

try that :)