複数のアニメーションをつなげる方法

jquery.deferredを使って関数をつなげようとしているのですが、
調べた通りコードを書いても機能してくれません。具体的には
matchinが終了したタイミングでshoot関数を実行させるといった
感じです。どうすればいいか
教えてください。

HTML5
1<body id="firework">
2
3  <div id="shoot">
4     <figure class="img1"><img src="images/canon.png" alt="canon" id="canon"></figure>
5     <figure class="img2"><img src="images/machi.png" alt="machi" id="match"></figure>
6     <figure class="img3"><img src="images/firework.png" alt="firework" id="fire"></figure>
7     <figure><img src="images/fire-ball.png" alt="fire-ball" id="ball"></figure>
8    </div>

CSS3
1#match {
2    opacity: 0;
3}
4
5#fire {
6    display: none;
7}
8
9#ball {
10    position: absolute;
11    right: 30px;
12    top: auto;
13    opacity: 0;
14}
15
16.firework {
17    position: relative;
18    height: 100%;
19}
20
21#canon {
22    position: absolute;
23    right: 30px;
24    bottom: 0;
25}
26
27.img2 {
28    position: absolute;
29    right: -100px;
30    bottom: 50px;
31    z-index: -99;
32    // transform: translateY(10px);
33    // transition: all .1s;
34}
35
36.img3 {
37    position: absolute;
38    right: -30px;
39    top: 0;
40}
41
42#shoot {
43    position: absolute;
44    width: 100px;
45    height: 100px;
46    right: 30px;
47    bottom: 0;
48}

javascript
1$(function (){
2    $('#canon').on('click',function() {
3
4      matchin(),
5
6      shoot();
7
8    });
9    function matchin() {
10
11      $('#match').animate({opacity: 1},1000);
12
13      $('.img2').animate({"bottom": "-10px"},1000),
14
15      $('.img2').animate({"bottom": "60px"},1000),
16
17      $('#match').animate({opacity: 0},1000).delay(4000);
18
19      }
20
21
22    function shoot() {
23
24      $('.img4').animate({opacity: 1},1000);
25
26      }
27
28      // $('html,body').animate({scrollTop: 0},2500,"swing");
29
30  });

行動規範の内容に同意します

回答2件

ベストアンサー

jQuery
1    function matchin() {
2      // 前半省略。
3      var d = $.Deferred();
4
5      $('#match').animate({opacity: 0}, 1000, function() {
6        d.resolve();
7      });
8
9      return d.promise();
10    }

としておけば、次のように書けます。

jQuery
1      matchin().done(function() {
2        shoot();
3      });

https://api.jquery.com/category/deferred-object/

投稿2019/04/15 08:59

x_x

総合スコア13749

dream

2019/04/15 10:54

無事出来ました、お手数おかけしました！

dream

2019/04/15 10:59

ちなみになんですが、仮にアニメーションを続けるとしたらdoneがあればつなぐことは可能なのでしょうか？

x_x

2019/04/16 05:19

shootも同様に作れば.then() でつなげたり、.when() ですべての処理が終わるまで待ったりできます。 https://api.jquery.com/deferred.then/ https://api.jquery.com/jQuery.when/

dream

2019/04/16 09:48

わかりました、ありがとうございます！

行動規範の内容に同意します

出先なんで簡単に。(できるはずってレベルです)

matchinが終わるタイミングまで、shootのanimation開始をdelayで遅らすのだと思います。

投稿2019/04/14 06:29

oikashinoa

総合スコア2826

dream

2019/04/15 08:13

忙しい時にすいません。合ってるかわかりませんが、コードを一部編集したので見てくれると助かります。遅れて出てくれないので多分間違ってますが。

oikashinoa

2019/04/15 09:11 編集

animation-delayがどういう効果をもっているかとか確認しました？ mdn css animation delay で調べてみましょう。サンプルを探してみて下さい。考え方が違うと思います。また、今の考え方に近いやり方がいいならAnimationEventで行けるかと。あと私の場合は、ソースはcodepenなどで書いてないと試しません。ソースを見て欲しい時はcodepenやJSFiddle 類似のサービスを使って誰でも全く同じソースを見られる、動作やエラーを共有出来るようにして相談すると格段に回答率が上がるはずです。チャレンジしてみて下さい。あと、私はヒントしか出さないのでコードは期待しないで下さい。

dream

2019/04/15 10:53

なるほど、cssを使う方法もあったんですね。気づかせてくれてありがとうございます。

行動規範の内容に同意します

あなたの回答