滚动时jquery动画延迟

我目前正在努力与jquery动画。 它只是一个小动画来改变滚动的高度和不透明度。 问题是，当我滚动时，动画不会流畅地运行。 当我滚动得很慢时，动画没有及时完成。 就像它停止直到我停止滚动。

jQuery的：

$(window).scroll(function(){ if ($(window).scrollTop() > 0){ //$('#navigation').addClass('scroll'); $('#navigation').stop().animate({height: '92px'}); $('#navigation .bg').stop().animate({opacity : '.85'}); } else { //$('#navigation').removeClass('scroll'); $('#navigation').stop().animate({height: '142px'}); $('#navigation .bg').stop().animate({opacity : '0'}); } }); 

CSS：

 #navigation { width: 1350px; position: fixed; z-index: 2000; background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ height: 142px; 

}

 #navigation .bg{ background: #000; position: absolute; width: 100%; height: 92px; top:0px; left: 0px; opacity: 0; 

}

提前致谢

Answer 1

你忘记在解决我的问题的动画之前添加true来停止stop(true)

 $(window).scroll(function(){ if ($(window).scrollTop() > 0){ //$('#navigation').addClass('scroll'); $('#navigation').stop(true).animate({height: '92px'}); $('#navigation .bg').stop(true).animate({opacity : '.85'}); } else { //$('#navigation').removeClass('scroll'); $('#navigation').stop(true).animate({height: '142px'}); $('#navigation .bg').stop(true).animate({opacity : '0'}); } }); 

Answer 2

问题是，每次滚动时，都会触发滚动function。 所以这意味着只需滚动一点点，就会触发滚动function数十次。 你需要的是一个变量来表示动画正在发生。 这样的事情……在全球范围内：

 var animatedScroll = false; 

然后你的重写将是

 $(window).scroll(function(){ if (!animatedScroll) { animatedScroll = true; if ($(window).scrollTop() > 0){ //$('#navigation').addClass('scroll'); $('#navigation').stop().animate({height: '92px'}); $('#navigation .bg').stop().animate({opacity : '.85'}, function(){ animatedScroll = false;}); } else { //$('#navigation').removeClass('scroll'); $('#navigation').stop().animate({height: '142px'}); $('#navigation .bg').stop().animate({opacity : '0'}, function(){ animatedScroll = false; }); } } }); 

Answer 3

我之前遇到过同样的问题。 这就是我解决的方式，对我来说就像一个魅力：

 var animatedScroll = false; $(window).scroll(function() { if( $(window).scrollTop() > 10 && !animatedScroll ) { animatedScroll = true; //$('#navigation').addClass('scroll'); $('#navigation').stop().animate({height: '92px'}); $('#navigation .bg').stop().animate({opacity : '.85'}); } else if ( $(window).scrollTop() < 10 && animatedScroll ) { animatedScroll = false; //$('#navigation').removeClass('scroll'); $('#navigation').stop().animate({height: '142px'}); $('#navigation .bg').stop().animate({opacity : '0'}); } });