Fiddle: <https://jsfiddle.net/x89ja8r8/>

I have been looking around to find a quick way to chain function async. Stackoverflow offers a lot of "same" solutions, but when I tried it, something is always wrong.

In the example below, I have 3 functions. I try to chain them asynchronously using $.Deffer().

**Expectation**: The div will animate to change its dimension for the duration of 5500ms, **then** the div will fade to 0.25 opacity in the duration of 2000ms, **then** the div innerHTML will be changed to DONE!

**Result**: The div changes its innerHTML (from fn3()) **simultaneously** with its changing its dimension (from fn1()) for the duration of 5500ms, **then** it fades to 0.25 opacity in the duration of 2000ms (from fn2()).

```
function fn1() {

  $("#result").animate({
    width: 800,
    height: 800
  }, 5500);

}

function fn2() {

  $("#result").animate({
    opacity: 0.25
  }, 2000);

}

function fn3() {

  $("#result").html("DONE!");

}

var dfr = $.Deferred();

dfr.done(fn1, fn2, fn3).resolve();

```

What is wrong here? If it didn't work at all, there should not be the async between fn1() and fn2(). The result shows clearly that fn2() does wait for fn1() to finish, but fn3() just kicks in without even waiting.