연쇄 기능을 지연 시키면 왜 문제가 발생합니까?

Question

var currentImage = 0; 
var images = new Array('Aerodynamics.jpg','ABC_news.jpg','yep.jpg'); 
var newImage = 'url(images/'+images[currentImage]+')'; 

function slideSwitch() { 
    $('.inner_img').css('background-image',newImage).animate({opacity:1.0},4000).delay(2000) 
    .animate({opacity:0.0},4000,function(){ 
     if(currentImage < images.length-1){ 
      currentImage++; 
     }else{ 
      currentImage = 0; 
     }; 
    }); 
}; 

첫 번째 애니메이션이 잘 간다. delay()도 잘 작동하며, 0으로 돌아 오는 불투명도에 대한 다음 애니메이션이 올바르게 작동하지 않는다. 객체가 아직 사라지지 않았다는 것을 의미한다. 콜백 함수를 트리거한다. 내가 잘못하고있다.

Answer 1

.animate()은 비 블로킹이다. 즉, 체인의 다음 단계 (지연)가 애니메이션이 끝난 후가 아니라 즉시 시작된다는 것을 의미한다.

jQuery 1.5의 Deferred objects을 사용하면 애니메이션이 완료 될 때만 해결되는 Deferred promise을 생성하여 애니메이션에서 차단 동작을 강제로 적용 할 수 있습니다.

내가 정확히이 어제 않는 질문에 대답, 예를 들어 여기 내 대답을 참조하십시오 Mouseover .animate stops prior .animate

Answer 2

당신은 익명 함수에 되돌리기 애니메이션을 첨부해야합니다.

function slideSwitch() { 
    $('.inner_img').css('background-image',newImage) 
     .animate({opacity:1.0},4000, function() { 

      $(this).animate({opacity:0.0},4000,function(){ 
      if(currentImage < images.length-1){ 
       currentImage++; 
      }else{ 
       currentImage = 0; 
      }); 
    });  
};