jQuery Deferredを使用したアニメーション

Question

jQuery Deferredを使用して
.aをアニメーション完了後
.bをアニメーション実行し完了後
.cをアニメーション実行としたいのですが
同時に実行されてしまいます。
お手数お掛け致しますが、ご教示宜くお願い致します。

<div class="box a">a</div>
<div class="box b">b</div>
<div class="box c">c</div>

*{margin: 0; padding: 0;}
.box{position: relative; width: 20px; padding: 30px; color:#fff; text-align: center; font-size: 150%; font-weight: bold;}
.a{background-color: #f5d832;}
.b{background-color: #72fca9;}
.c{background-color: #66eafe;}

jQuery:ver 3.2.1

$(function(){
  
  function move(j){
    var d = new $.Deferred();
    j.animate({left:50},function(){d.resolve();});
    return d.promise();
  }
  
  move($('.a'))
  .then(move($('.b')))
  .then(move($('.c')));

});

Answer 1

move($('.a'))
  .then(move($('.b')))
  .then(move($('.c')));

then(move(・・・));だと
moveを処理した結果をthenに入れるという事なのでmoveが同時に実行されています。
以下のように修正すると良いです。

  move($('.a'))
  .then(function(){ return move($('.b') } ))
  .then(function(){ return move($('.c') } ));

Comments

[l_l]

ご回答ありがとうございます。
下記のコードで動きました。
ご対応ありがとうございました。

JavaScript
move($('.a'))
.then(function(){ return move($('.b'))})
.then(function(){ return move($('.c'))});