jquery淡入回调不等待答案

【问题标题】：jquery fade in callback not waitingjquery淡入回调不等待
【发布时间】：2011-11-13 18:37:56
【问题描述】：

我试图让一个 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/

任何想法为什么会发生这种情况？

【问题讨论】：

要调试，您可以将淡入淡出的持续时间从三分之一秒增加到 5000 毫秒。

标签： jquery callback fadein

【解决方案1】：

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

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

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

【讨论】：

@jonathan topf 我同意 jfriend00 给出了正确的答案（给他+1），但我的也有效......

【解决方案2】：

以 jsfiddle 为例进行检查

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

【讨论】：

【解决方案3】：

你应该尝试改变时间，它们以相同的速度放松：

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

试试看:)

【讨论】：

【解决方案4】：

你可以试试：
$("#story1").delay(500).fadeOut("300");

【讨论】：