jquery淡化回调而不是等待

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

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