Jquery, 왜 애니메이션 높이가 예상대로 작동하지 않는지 확실하지 않습니다.

Question

다음 코드를 사용하려고합니다.

사용자가 포인트 x로 스크롤하면 메뉴 래퍼의 높이가 줄어 듭니다. .extender를 클릭하여 높이를 복원 할 수 있습니다. 이 링크를 클릭하면 링크가 사라집니다 (따라서 토글 기능은 없습니다).

이 토글은 유사한 사용 사례에서 해결되는 경향이 있으며,이 문제를 해결하는 방법을 알고 싶습니다. 왜 내가 가지고있는 코드가 작동하지 않는지 궁금합니다.

$(document).scroll(function(){ 
    var height = $('div#zone-menu-wrapper').height(); 
    if (some_logic){ 
     $('div#zone-branding-wrapper').animate({height: 10}, 1500); 
    } 
}); 

$('.extender').click(function(){ 
    $('div#zone-branding-wrapper').animate({height: 380}, 1500); 
    return false; 
}); 

Answer 1

애니메이션이 이미 진행 중이면 반환됩니다.

var inProgress = false; 
$(document).scroll(function(){ 
    if(inProgress)return; 
    var height = $('div#zone-menu-wrapper').height(); 
    if (some_logic){ 
     inProgress = true; 
     $('div#zone-branding-wrapper').animate({height: 10}, 1500, function(){ 
        inProgress = false; 
     }); 
    } 
}); 

$('.extender').click(function(){ 
    $('div#zone-branding-wrapper').animate({height: 380}, 1500); 
    return false; 
});