滚动时的jquery动画延迟答案

【问题标题】：jquery animation delay when scrolled滚动时的jquery动画延迟
【发布时间】：2013-05-16 19:58:06
【问题描述】：

我目前正在为一个 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;

}

提前致谢

【问题讨论】：

标签： jquery animation triggers scroll delay

【解决方案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'});
    }
});

【讨论】：

【解决方案2】：

问题是，每次滚动时，都会触发滚动功能。所以这意味着即使只是滚动一点点，您都会触发滚动功能数十次。您需要的是一个变量来指示动画正在发生。所以像这样的事情...... 在全球范围内：

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; });
        }
    }
});

【讨论】：

啊，我忘记带花括号了。
您的代码有效：D，但不知何故，当我滚动回顶部时，导航不会变回其原始状态。

【解决方案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'});

    }

});

【讨论】：