お世話になっております。
jQueryのDeferredを使用して
.box1,box2のアニメーション実行後
.box3のアニメーション実行
.box3アニメーション実行後.box4を実行したいのですがうまくいきません。
お手数おかけしますが
ご教示宜しくお願い致します。
jQuery ver:3.2.1
HTML
1<div class="box box1">box1</div> 2<div class="box box2">box2</div> 3<div class="box box3">box3</div> 4<div class="box box4">box4</div>
CSS
1.box{position: relative; width: 100px; height: 100px; color:#000; margin-bottom: 20px;} 2.box1{background-color: #f88;} 3.box2{background-color: #88f;} 4.box3{background-color: #8f8;} 5.box4{background-color: #989;}
JavaScript
1function anim(a){ 2 3 var df = $.Deferred(); 4 5 if(!a) { 6 df.reject(); 7 } else { 8 $(this).animate(a,1000,function(){ 9 df.resolve(); 10 }); 11 } 12 13 return df.promise(); 14 15} 16 17var hoge = $.when( 18 anim.call($('.box1'),{left:50}), 19 anim.call($('.box2'),{left:50}) 20); 21 22console.log('hoge:',hoge.state()); 23 24var bar = hoge.done( 25function(){ 26 return anim.call($('.box3'),{left:100}); 27 } 28); 29 30console.log('bar:',bar.state()); 31 32var foo = bar.done( 33function(){ 34 return anim.call($('.box4'),{left:100}); 35 } 36); 37 38console.log('foo:',foo.state()); 39
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。