스크롤했을 때 jquery 애니메이션 지연이

Question

인데 현재 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

문제는 스크롤 할 때마다 스크롤 기능이 실행된다는 것입니다. 따라서 스크롤을 몇 번만하면 스크롤 기능이 수십 번 트리거됩니다. 필요한 것은 애니메이션이 일어나고 있음을 나타내는 변수입니다. 글로벌 범위에서이 같은 뭔가 ... :

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 2

것 나는 이전과 같은 문제가 있었다. 이것은, 내가 해결하는 방법입니다 나를 위해 마법처럼 작동합니다

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 3

당신이 내 문제 해결 애니메이션 전에

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