2

我一直在尝试调整高度导航，如下所示：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 秒的时间。为了使该动作实时更快地发生，我缺少什么？

4

1 回答 1

3

问题是.animate()每次调用时都会添加到队列中。因此，当您从顶部滚动时，每个滚动事件都会将另一个动画添加到动画队列中。然后，当您返回顶部时，.animate({height:'140px'}, 500)动画将被添加到队列的末尾，这意味着它只会在所有其他动画发生后才会发生（每个动画需要 500 毫秒）。当然，您不会看到这些其他动画正在发生，因为您告诉 jQuery 为它们已经拥有的值设置动画，因此在视觉上没有任何事情发生。

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

尝试：

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/

于 2013-10-20T22:56:16.933 回答