我目前正在努力使用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;
}
提前致谢
答案 0 :(得分: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'});
}
});
答案 1 :(得分:0)
问题是,每次滚动时,都会触发滚动功能。这意味着只需滚动一点点,就会触发滚动功能数十次。你需要的是一个变量来表示动画正在发生。所以像这样...... 在全球范围内:
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; });
}
}
});
答案 2 :(得分:0)
之前我遇到过同样的问题。这就是我解决的问题,对我来说就像一个魅力:
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'});
}
});