Почему обратная анимация() не срабатывает сразу?

Я использую $ (window) .scroll, чтобы анимировать верхний заголовок моего сайта при прокрутке вверх от самой вершины окна просмотра. Исходное условие работает отлично, при этом все мои анимационные эффекты работают. Проблема в том, что когда я прокручиваю назад до верхней части страницы, заголовок не оживляет исходные настройки (несколько раз он имеет, но после долгой паузы).Почему обратная анимация() не срабатывает сразу?

jsfiddle: http://jsfiddle.net/3ocbkkyk/

JQuery:

var $headerBar = $(".header"), 
    $window = $(window), 
    offset  = $headerBar.offset(), 
    topPadding = 0; 

$window.scroll(function() { 
    if ($window.scrollTop() > offset.top) { 
     //$headerBar.stop().animate({ 
      //marginTop: $window.scrollTop() - offset.top + topPadding 
     //}); 

     console.log('Left the Top'); 

     // Add class 'fixed' 
     $headerBar.addClass('moved'); 

     $('p.mainprinav_text').animate({ padding: '20px 45px 20px 0' }); 
     $('ul.mainprinavlist li a').animate({ padding: '20px 35px' }); 
     $('div.headerlogo').animate({ top: '6px' }); 
     $('div.headerlogo img').animate({ width: '90px' }); 
     $('body.site').animate({ paddingTop: '38px' }); 

    } else if ($window.scrollTop() <= offset.top) { 
     //$headerBar.stop().animate({ 
      //marginTop: 0 
     //}); 

     console.log('Back to Top'); 

     // Remove class 'fixed' 
     $headerBar.removeClass('fixed'); 

     $('p.mainprinav_text').animate({ padding: '39px 45px 39px 0' }); 
     $('ul.mainprinavlist li a').animate({ padding: '39px 35px' }); 
     $('div.headerlogo').animate({ top: '13px' }); 
     $('div.headerlogo img').animate({ width: '120px' }); 
     $('body.site').animate({ paddingTop: '0' }); 
    } 
});

источник

2014-09-08 Pegues

Это ** много ** кода. Большая часть этого вопроса совершенно не связана с вопросом. Пожалуйста, отредактируйте его, чтобы осталось только минимальное количество, необходимое для воспроизведения проблемы. –

Вы вызываете '.animate()' * MANY * раз, что является причиной задержки. Вы должны только называть его один раз, когда достигаете вершины, и еще раз, когда покидаете верх. Не каждый раз прокрутка происходит. –

Я добавил jsfiddle, который показывает эффект. Спасибо за Кевина. Не могли бы вы рассказать мне, как я консолидирую все animate() в одном для разных селекторов, которые имеют разные настройки эффекта? Возможно, мой код нуждается в реструктуризации? Есть ли проблема с моим подходом к этому? – Pegues

Проблема

, что нет ничего, чтобы предотвратить накопление.

, если вы добавите .stop() перед каждым animate(...), то это предотвратит возникновение очереди, которая вызывает задержку в анимации.

Как in this fiddle...

Хотя есть и другие вещи, которые могут сделать это лучше, как хорошо. У вас должен быть переключатель, чтобы каждая часть скрипта срабатывала только один раз, анимации можно заменить на css, чтобы вы могли просто переключать класс, и все это можно сделать с гораздо меньшим количеством кода.

Если вас интересуют эти другие изменения, я могу сделать еще одну скрипку для иллюстрации.

источник

2014-09-08 22:21:44 FiLeVeR10

Если бы вы были добры, не могли бы вы показать мне, как это сделать с другим предложением, которое у вас было? Спасибо, FiLeVeR10 – Pegues

@ScriptsConnect позволяет скрипту решить проблему с задержкой, с которой вы столкнулись? – FiLeVeR10

Добавляя .stop(), да. Это прекрасно решает проблему. Спасибо, что указали на это. – Pegues

Почему обратная анимация() не срабатывает сразу?

ответ

Смежные вопросы