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

Исчезните текущий, прежде чем вы переходите в следующий.Тогда вы не увидите их обоих на экране одновременно (например, без перекрестного затухания).

Answer 2

Проверьте это на примере jsfiddle

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

Answer 3

Вы можете попробовать:
$("#story1").delay(500).fadeOut("300");

Answer 4

Вы должны попытаться изменить время, они замедляются с той же скоростью:

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

попробуйте это:)