jquery animation delay when scrolled

Question

im currently struggling with a jquery animation. its just a little animation to change height and opacity on scroll. the problem is, that the animation doesnt run fluently while i scroll. when i scroll really slow the animation does not finish in time. its like it pauses till i stop scrolling.

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;

}

thanks in advance

Answer 1

I had the same problem before. This is how i solved, works like a charm for me:

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

    }

});

Answer 2

you forgot adding true to stop stop(true) before your animations that solved my problems

$(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 3

The issue is, everytime you scroll, you trigger the scroll function. So that means for just scrolling even a little bit, you are triggering the scroll function dozens of times. What you need is a variable to indicate that the animation is taking place. So something like this... At a global scope:

var animatedScroll = false;

Then your rewrite would be

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