3 개의 함수를 순차적으로 실행하는 방법은 무엇입니까?

Question

jQuery가 일부 함수를 비동기로 인식합니다. 당신이 예상 결과는 사업부가해야한다는 것입니다 버튼을 클릭하면 예를 들어이 jsFiddle

HTML을

<button id="click"> 
    TestMe 
</button> 
<div class="example"> 
    Hello 
</div> 

JS

var ex = $(".example").first(); 

$("#click").click(function() { 
    ex.addClass("notransition") 
    .width("100%") 
    .removeClass("notransition"); 
}) 

CSS

.example { 
    background-color: white; 
    width: 50%; 
    transition: width .5s ease; 
} 

.example.notransition { 
    transition: none; 
} 

에 대해 살펴 클래스가 있기 때문에 애니메이션없이 확장 될 수있다. .notransition 그러나 이것은 발생하지 않습니다.

그래서이 세 가지 방법을 어떻게 연결할 수 있습니까?

Answer 1

addClass() 및 removeClass()은 큐를 사용하지 않으므로 동시에 실행됩니다.

당신은 .queue()을 사용할 수 있습니다

및 .dequeue()

var ex = $(".example").first(); 
$("#click").click(function() { 
    ex.addClass("notransition").width("100%").delay(500).queue(function() { 
     ex.removeClass("notransition").dequeue(); 
    }); 
}); 

Updated Fiddle

---

또는 간단한 setTimeout

var ex = $(".example").first(); 
$("#click").click(function() { 
    ex.addClass("notransition").width("100%"); 
    setTimeout(function() { 
     ex.removeClass("notransition").dequeue(); 
    },500); 
}); 

Answer 2

이 시도 : 사용되는 .done() 함수

var ex = $(".example").first(); 

$("#click").click(function() { 
ex.addClass("notransition").width("100%").done(function(){ 
    ex.removeClass("notransition"); 
}) 

}); 

Answer 3

이 시도 :

var ex = $(".example").first(); 

$("#click").click(function() { 
    ex.addClass("notransition").width("100%").delay(1000).queue(function(){ 
    ex.removeClass("notransition"); 
    }); 
}) 

내 테스트에서 잘 작동하는 것 같다.