滚动后的jquery动画延迟较长
滚动后的jquery动画延迟较长
提问于 2015-07-11 10:11:25
我有一个宽度为0px的div。在用户滚动x距离后，我想要将div动画化为140px。
当我滚动到这一点时，在我看到动画之前有一个很长的延迟。我滚动得越远，延迟就越长。我还在同一个点将包含div设置为fixed。固定项工作正常，但动画总是延迟：
HTML：
<div class="menu-bar">
<div class="wrap">
<div id="menu-logo">
<img src="..." />
</div>
<nav id="site-navigation" role="navigation">...</nav>
<div class="right-menu">...</div>
</div>
</div>JS：
$(window).scroll(function(){
var barPos = $('#content').offset().top - $(document).scrollTop();
var menuHeight = $('.menu-bar').height();
var topColors = $('#top-colors').height();
if(barPos <= (topColors+menuHeight)) {
$('.menu-bar').css({'position':'fixed','bottom':'auto','top':'0px'});
$('#menu-logo').animate({'width':'140px'});
} else {
$('.menu-bar').css({'position':'absolute','bottom':'0px','top':'auto'});
$('#menu-logo').animate({'width':'0px'});
}
});回答 2
Stack Overflow用户
发布于 2015-07-11 10:30:01
滚动文档视图或元素时会激发scroll事件。
这意味着，您的回调将多次触发，因此每个jQuery.fn.animate都会在队列中添加一个新动画。
作为一种快速修复方法，您可以尝试在每次jQuery.fn.animate调用之前调用jQuery.fn.clearQueue或jQuery.fn.stop。
Stack Overflow用户
发布于 2017-10-14 20:59:39
您可以在JQuery中更改css声明内的过渡动画：
$(window).scroll(function(){
var barPos = $('#content').offset().top - $(document).scrollTop();
var menuHeight = $('.menu-bar').height();
var topColors = $('#top-colors').height();
if(barPos <= (topColors+menuHeight)) {
$('.menu-bar').css({
'position':'fixed',
'bottom':'auto',
'top':'0px',
'width': '140px',
'transition': 'width 0.4s ease'
});
} else {
$('.menu-bar').css({
'position':'absolute',
'bottom':'0px',
'top':'auto'
'width': '0',
'transition': 'width 0.4s ease'
});
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31352749
复制相关文章
相似问题
腾讯云开发者
