jquery 淡入回调不等待

Question

我试图让一个div淡出，然后让第二个div淡入其位置，但第二个div淡入淡出的回调似乎不会等待第一个div完成淡出，事实上它们都淡出同时提供交叉淡入淡出效果，而不是淡出然后再淡入。代码如下:

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

    })

});

以及我使用它的页面:

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

有什么想法为什么会发生这种情况吗？

Answer 1

您将在淡出另一个 div 之前淡入新的 div。这会产生交叉淡入淡出效果，这就是您看到它的原因。也许您的意思是:

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

在淡入下一个之前淡出当前一个。然后，您将不会同时在屏幕上看到它们(例如，没有交叉淡入淡出)。