jquery fade in callback not waiting

问题:

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?

回答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).

回答2:

Check this out with example jsfiddle

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

回答3:

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

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

try that :)

回答4:

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