Question

我试图让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");
});

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

Answer 2

使用示例jsfiddle

进行检查

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

Answer 3

你应该尝试改变时间，他们会以相同的速度缓和：

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

尝试：）

Answer 4

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

jquery淡化回调而不是等待

4 个答案: