0

我目前正在努力使用 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;

}

提前致谢

4

3 回答 3

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'});
    }
});
于 2015-07-20T11:22:54.463 回答
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; });
        }
    }
});
于 2013-05-16T20:08:56.527 回答
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'});

    }

});
于 2014-04-09T09:48:14.760 回答