How to execute 3 functions sequentially?

Question

I have noticed that jQuery does some functions async. For example take a look to this 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;
}

When you click the button the expected result is that the div should be expanded without animations because of class .notransition but this will not occur.

So how i can chain these three methods?

Answer 1

As addClass() and removeClass() don't use queue they are executed simultaneously.

You can use .queue() and .dequeue()

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

Updated Fiddle

---

Or simple setTimeout

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

Answer 2

Try this: Use .done () function

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

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

});

Answer 3

Try this:

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

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

Seems to work well in my testing.