jQuery 체인이 예상대로 작동하지 않습니다.

Question

jQuery는 실행중인 패키지가 완료 될 때까지 다음 함수로 이동하지 않습니다. 그러나 이것이 나를 위해 작동하지 않는 것 같습니다. 예를 들면 다음과 같습니다.

    $("#bigmap").animate(
        { 
        opacity: 0 
        }, 500).css("display", "none");  

#bigmap을 페이드 아웃 한 다음 표시를 none으로 설정합니다. 그러나 그것은 즉시 none으로 설정되어있는 것 같습니다.

저는이 점을 확실히 알고있어서 분명합니다.

Answer 1

당신의 최선의 선택은 실제로 이것이다 :

$('#bigmap').fadeOut(500); 

이 그것을 페이드 아웃하고 자동으로 수행 할 때 그것을 숨길 것입니다.

원래 코드가 예상대로 작동하지 않는 이유를 설명하려면 jQuery 애니메이션과 자바 스크립트에 대해 약간 이해해야합니다.

jQuery 애니메이션은 애니메이션 대기열에 들어가고 타이머를 사용하여 시간이 지남에 따라 실행됩니다. .animate()에 대한 호출은 애니메이션을 시작하기 만하면 애니메이션이 완료되기 훨씬 전에 함수가 반환됩니다. 잠시 후까지 애니메이션이 완료되지 않습니다. 따라서 .animate()에 대한 호출이 반환되면 (애니메이션 시작 직후) 다음 체인 메소드가 실행됩니다.

체인 된 메소드 $(selector).aaa().bbbb().cccc()은 자바 스크립트 엔진에 의해 동 기적으로 실행되므로 jQuery는 타이밍을 제어하지 않습니다.

다행히도 .animate() 메서드에 대한 완료 함수가 있으므로 애니메이션이 완료되면 코드를 실행하고 코드를 삽입하여 해당 개체를 숨길 수 있습니다.

$('#bigmap').animate({opacity:0}, 500, function() { 
    $(this).hide(); 
}); 

이가 숨어있는이 jQuery를 .fadeOut() 방법에 내장되어 있기 때문에 전혀이 문제에 대해 걱정이 완료되면 자동으로 개체를 숨길 다음도이없는 .fadeOut() 방법을 사용하는 것보다 더 나은 :

$('#bigmap').fadeOut(500); 

Answer 2

기본적으로 체인이 직렬로 트리거되어 즉시 작동하기 때문에 예상대로 작동하지 않는 이유가 있습니다. 애니메이션 기능은 일정 기간 동안 발생합니다.

즉, 애니메이션이 시작되면 디스플레이가 실행되지 않습니다.

애니메이션이 끝날 때 실행되는 애니메이션 메서드의 콜백 함수를 사용해야합니다.

$('#bigmap').animate({ 
    opacity:0 
}, 500, function() { 
    $(this).hide(); 
}); 

당신이 콜백 함수에 대한 자세한 정보를 찾을 수 있습니다 checkout the docs 경우

는 방법 complete을했다. 여기