Что может вызвать запуск анимации jQuery за меньшее количество шагов? - PullRequest
Новая
       3

Что может вызвать запуск анимации jQuery за меньшее количество шагов?

3 голосов
/ 01 декабря 2011

У меня есть функция js scrollToTop(), которая вызывает jQuery animate для анимации свойства scrollTop, подобного этому 

function scrollToTop(){
    $('html, body').animate({ scrollTop: 0 }, {
        'duration':500,
        'step':function(){
            console.log('step',jQuery.fx.interval);
        }
    });
}

У меня есть 2 ссылки, каждая из которых имеет свой обработчик .click, внутри которого вызывается функция scrollToTop. Когда я вызываю его по одной ссылке, анимация плавная и происходит за 13–15 шагов, при вызове из другого обработчика ссылок анимация прерывистая и происходит за 2–3 шага. jQuery.fx.interval - 13 в обоих случаях.

Что еще может заставить jQuery выполнять анимацию за меньшее количество шагов?

Изменить:

По запросу, обработчики: 

$('.panel-item').click(function(e){    
    var item = $(this);

    if ($(item).hasClass('wa_reset'))
        $items.removeClass('active'); // this is declared earlier in the code $items = $('.panel');

    scrollToTop();
});

$('.scroll-top').click(function(e){
    scrollToTop();
});

Никакие другие обработчики не прикреплены к ссылкам.

Также приятно отметить, что то же самое происходит с другими анимациями на сайте и во всех браузерах. Например, слайдер изображения иногда перемещается к следующему изображению за 20 шагов, а по другим - за 2-3 шага. Наиболее последовательным сценарием для репликации проблемы был сценарий, описанный ранее с функцией scrollToTop.

1 Ответ

1 голос
/ 02 декабря 2011

Хорошо, чтобы ответить на мой собственный вопрос. Оказывается, событие on click запускало элемент, который был глубоко вложен в разметку страницы. Поэтому событие вызвало задержку ответа jquery из-за всплеска. Использование e.stopPropagation(); в обработчике кликов позволило избежать пузырей и позволило анимации выполняться с правильной скоростью. Однако, почему интервал изменяется внутри jQuery, до сих пор остается для меня загадкой.

...