我一直在尝试制作调整高度导航,如下所示:http://www.kriesi.at/themes/enfold/ http://www.kriesi.at/themes/enfold/
正如在 jsfiddle 上看到的那样,我已经非常接近了:http://jsfiddle.net/magnusbrad/4DK3F/12/ 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 秒的时间。为了使该操作更快、更实时地发生,我缺少什么?
问题是.animate()
每次调用时都会添加到队列中。因此,当您从顶部滚动时,每个滚动事件的另一个动画都会添加到动画队列中。然后当你回到顶部时,.animate({height:'140px'}, 500)
动画被添加到队列的末尾,这意味着它只会在所有其他动画发生后才会发生(每个动画需要 500 毫秒)。当然,您看不到这些其他动画的发生,因为您告诉 jQuery 对它们已有的值进行动画处理,因此视觉上没有发生任何事情。
http://api.jquery.com/animate/ 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/ http://jsfiddle.net/4DK3F/32/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)