jquery 지연 및 css3 전환

Question

Ajax 호출의 경우 특정 순서로 호출해야하는 여러 요소에 대한 전환이 있습니다. Deferred jQuery에 대해 읽었을 때 이것이 내가 찾고있는 것이라고 생각했지만 작동시키지 못했습니다. http://jsfiddle.net/pe5Bb/1/

것 같아요 문제는 CSS3 전환됩니다

은 내가 archieve 싶은 아이디어를 제공하는 간단한 jsfiddle했다. 모든 기능은 처음부터 실행됩니다. 그러나 전이 콜백에 console.log를 배치하면 작동하는 것처럼 보이지만 함수는 여전히 실행됩니다.

function box2() { 
var deferred = $.Deferred(); 

if ($('#box2').hasClass('active')) { 
    $('#box2').css({opacity:0}).bind(transitionend, function(){ 
     console.log("css3 done"); 
     deferred.resolve(); 
     $('#box2').unbind(transitionend); 
    }); 
} else { 
    deferred.resolve(); 
} 

return deferred.promise(); 

은}

내가 달성하고자하는 것은 내가 (새로운 콘텐츠로의 전환에 대한 상태를 가진) 여러 기능을 만들 수 있으며, 나는 그들이 호출해야 어떤 순서로 말할 수 있다는 것입니다. 이 예제에서는 클래스 추가/삭제를 통해 때때로 호출되는 css3 전환 작업을 수행합니다. 이 시나리오에서 지연된 사용이 올바르지 않다면 그 정보를 듣고 싶습니다.

Answer 1

나는이 문제가 단지 당신이 부른 방식이라고 생각한다. 약속이 해결되면 실행하려는 함수를 전달해야합니다. 이런 식으로 뭔가 : 당신이 체인 통화의 무리를 원하는 경우

var promise = box(); 
promise.done(box2); 

, 당신은 이런 식으로 그것을 할 수는 :

var promise = box(); 
promise.done(function() { 
    promise = box2(); 
    promise.done(function() { 
     scrollTo(); 
    }); 
}); 

또는

jsfiddle link

, 당신은 then 방법을 사용할 수 있지만, 다음과 같이 호출해야합니다.

var promise = box(); 
promise.done().then(box2).done().then(scrollTo);