Как выполнить 3 функции последовательно?

Question

Я заметил, что jQuery выполняет некоторые функции async. Например, посмотрите на этот 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; 
} 

При нажатии кнопки ожидаемый результат, что DIV должен расширяться без анимации из-за класса . Непереход, но этого не произойдет.

Так как я могу связать эти три метода?

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"); 
    }); 
}) 

Кажется, хорошо работать в моем тестировании.