jQuery - 이전 명령문이 완료된 후에 만 ​​명령문을 실행하려면 어떻게합니까?

Question

예를 들어, $ .ajax 함수에서 beforeSend 옵션을 사용하고 있습니다. 아래의 코드 샘플에서는 페이드 아웃이 이전 문에서 발생하는 동안 .html 함수가 실행됩니다. 어떻게하면이 행동을 멈출 수 있을까요?

jQuery("#container").fadeOut("slow", function() { 
    jQuery("#container").removeClass('error'); 
}); 

jQuery("#container").html("success").fadeIn("slow"); 

그래서 무슨 일 페이드 아웃 동안, JQuery와 html로 "성공"을 주입하는 것입니다. 애니메이션이 완료된 후 애니메이션이 발생하기를 원합니다.

어떻게해야합니까?

감사합니다. 콜백을 사용

Answer 1

...

jQuery("#container").fadeOut("slow", function() { 
    // At this point, animation is complete, and the element is invisible 
    jQuery(this).removeClass("error").html("success").fadeIn("slow"); 
}); 

Answer 2

은 내가 jQuery FxQueues plugin 2.0

Answer 3

당신이 아약스 호출 맥락에서이를 사용하는 경우, 나는 후자 코드의 일부가 될 기대 사용하여 그것의 성공 콜백은 컨테이너의 페이드와 인라인하지 않습니다. 이렇게하면 호출 전에 컨테이너가 숨겨지고 호출이 성공적으로 반환 된 후에 만 ​​컨테이너가 표시됩니다. 실제로 fadeIn이 완료되면 호출이 성공했는지 여부를 확인할 수 있도록 분할하려고 할 수 있습니다.

jQuery.ajax({ 
    ... 
    beforeSend: function() { 
        jQuery("#container").fadeOut("slow", function() { 
         jQuery("#container").removeClass('error'); } 
        }); 
       }, 
    success: function(data) { 
        jQuery("#container").html("success").fadeIn("slow"); 
       } 
    ... 
}); 


jQuery.ajax({ 
    ... 
    beforeSend: function() { 
        jQuery("#container").fadeOut("slow", function() { 
         jQuery("#container").removeClass('error'); } 
        }); 
       }, 
    success: function(data) { 
        jQuery("#container").html("success"); 
       }, 
    error:  function(req,status) { 
        jQuery("#container").html("error").addClass("error"); 
       }, 
    complete: function() { 
        jQuery("#container").fadeIn(); 
       } 
});