質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1396閲覧

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

l_l

総合スコア38

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/06/18 00:20

お世話になっております。
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

doneをthenに変更したら動きました。

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.then( 25function(){ 26 return anim.call($('.box3'),{left:100}); 27 } 28); 29 30console.log('bar:',bar.state()); 31 32var foo = bar.then( 33function(){ 34 return anim.call($('.box4'),{left:100}); 35 } 36); 37 38console.log('foo:',foo.state()); 39 40 41 42 43 44 45

投稿2017/06/18 10:03

l_l

総合スコア38

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問