jQuery淡入回调不等待 [英] jquery fade in callback not waiting

问题描述

im试图使一个div淡出然后在其位置放第二个div，但是第二个div淡出的回调似乎并没有等待第一个div淡出，事实上它们都已淡出同时给人以交叉淡入淡出的效果，而不是淡出然后再淡入淡出.这是代码:

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/

为什么会这样?

推荐答案

您要先淡入新的div，然后再淡出另一个div.这会产生交叉淡入淡出的效果，所以这就是您看到它的原因.也许您的意思是:

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

这篇关于jQuery淡入回调不等待的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！