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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/15 10:54
2019/04/15 10:59
2019/04/16 05:19
2019/04/16 09:48