JQuery медленная реакция scrollTop()

Question

Я пытался сделать высоту изменения размера навигации, как показано здесь: http://www.kriesi.at/themes/enfold/

Я получил очень близко, как видно здесь на jsfiddle: http://jsfiddle.net/magnusbrad/4DK3F/12/

<div id="nav" class="header"> 
nav here 
<ul class="right"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
</ul> 
</div> 

$(window).scroll(function() { 
if ($(document).scrollTop() === 0) { 
    $('#nav.header').animate({height:'140px'}, 500); 
    $('ul.right').animate({'line-height':'140px'}, 500); 
} else { 
    $('#nav.header').animate({height:'40px'}, 500); 
    $('ul.right').animate({'line-height':'40px'}, 500); 
} 
}); 

При прокрутке вниз анимация работает отлично, однако, когда вы прокручиваете назад до верхней части страницы, для обновления и выполнения инструкции else требуется 10 секунд. Что мне не хватает, чтобы сделать это быстрее, в реальном времени?

Answer 1

Проблема заключается в том, что .animate() добавляет в очередь каждый раз, когда ее вызывают. Так как вы прокручиваете верхнюю часть, другая анимация добавляется в очередь анимации для каждого события прокрутки. Затем, когда вы вернетесь в начало, анимация .animate({height:'140px'}, 500) добавляется в конец очереди, означая, что это произойдет только после того, как все другие анимации произойдут (каждый из них займет 500 миллисекунд). Конечно, вы не видите, что эти другие анимации происходят, потому что вы говорите jQuery, чтобы оживить те ценности, которые у них уже есть, и поэтому ничего визуально не происходит.

http://api.jquery.com/animate/

Try:

var atTop = !$(document).scrollTop(); 

$(window).scroll(function() { 

    if ($(document).scrollTop() === 0 && !atTop) { 

     $('#nav.header').animate({height:'140px'}, 500); 
     $('ul.right').animate({'line-height':'140px'}, 500); 

     atTop = true; 

    } else if (atTop) { 

     $('#nav.header').animate({height:'40px'}, 500); 
     $('ul.right').animate({'line-height':'40px'}, 500); 

     atTop = false; 

    } 
}); 

http://jsfiddle.net/4DK3F/32/