Вложенная функция обратного вызова jQuery запускается с задержкой анимации - PullRequest
Новая
       18

Вложенная функция обратного вызова jQuery запускается с задержкой анимации

0 голосов
/ 07 марта 2012

Я только что обнаружил странное поведение с функцией jQuery .animate () и ее необязательной функцией обратного вызова. В основном у меня есть две функции:

Первый прокручивает страницу вверх. Это делается с помощью функции .animate (), которая находится внутри этой функции. Затем функция .animate () запускает функцию обратного вызова после завершения анимации. Функция обратного вызова передается при вызове первой функции. Итак, вторая функция - это переданная функция. Это предполагает перемещение страницы влево или вправо (в зависимости от того, что было нажато). Вроде как слайдер.

Чего я хочу добиться, так это того, чтобы первая анимация запускалась, а после ее завершения запускалась вторая анимация. Так что должно быть движение сначала вверх, а затем влево / вправо. Это уже работает, НО: После того, как первая анимация завершена, вторая запускается ПОСЛЕ задержки, равной той же длительности, что и первая продолжительность анимации (я тестировал ее с разными длительностями анимации. Соответственно, задержка изменяется). Итак, анимация идет вверх, задержка, влево / вправо.

Когда я убираю функцию обратного вызова из функции анимации, обе анимации запускаются одновременно, что приводит к диагональному движению.

Для лучшего понимания, вот код:

Первая функция для прокрутки страницы вверх: 

function scrollUp(f){
    if ($.browser.opera) {
        var target = 'html';
    }else{
        var target = 'html,body';
    }
    $(target).animate({
        scrollTop: 0
    }, 1500, "swing", function(){
        if (typeof f == "function") f();
    }); 
};

Вторая функция для перемещения страницы в сторону: 

function moveContent(i){
    $("div#page_wrap").animate({
        left : - (wrapper_width * i) + "px"
    }, 2000, function(){
        //do several things here
    });
};

А вот как я их комбинирую: 

scrollUp(function(){
    moveContent(1);
});

В результате анимация сначала прокручивается вверх, затем ждет 1500 миллисекунд, а затем перемещается влево или вправо.

Когда я делаю это так: 

function scrollUp(f){
    if ($.browser.opera) {
        var target = 'html';
    }else{
        var target = 'html,body';
    }
    $(target).animate({
        scrollTop: 0
    }, 1500, "swing");

    //callback outside of .animate()
    if (typeof f == "function") f();    
};

Обе анимации запускаются одновременно или, скорее, вторая анимация запускается, пока первая еще работает.

У кого-нибудь есть идея, почему происходит такая задержка и / или как я могу ее избежать?

Thx!

Edit:

Хорошо, я нашел ошибку. Это было так, как я вызывал функции: 

$(".level_2 li a").click(function(){
    var s = $(document).scrollTop();
    if(s > 0){ // <- this here was the problem
        scrollUp();
    }
    if($(this).hasClass("mw") == true){
        if(s > 0){
            scrollUp(function(){
                moveContent(1);
            });
        }else{
            moveContent(1);
        }   
    }
});

Это был фактически первый оператор if в функции click. Он перемещает страницу вверх, затем проверяет, какая ссылка была нажата, и снова вызывает функцию scrollUp (). И это на самом деле вызывает задержку. Убрал оператор if, и теперь он работает просто отлично.

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

В любом случае, большое спасибо за комментарии!

...