###前提・実現したいこと
片方のアニメーション実行中に、もう片方をリセットしたいです。
jsfiddle:https://jsfiddle.net/uscx4pyf/
###発生している問題
左と右で少し違うアニメーションがあり、いずれも➀➁➂の一連の流れを反復させたいと思っています。
➀水色の正方形が下に降りる
➁その形がかわる
➂グレーの背景が丸くなる
しかし例えば左の➀を実行している途中で、右を実行してみてください。
そのときなぜか左で➂が発生してしまう(左の背景が丸くなってしまう)という不具合が発生していまいます。
右をクリックした時点で左にはresetAnimation()
がかかってリセットされるはずなのに(意図しているつもりなのに)、なぜか、左が丸くなってしまうんです。
もちろん左右逆でもそうなります。
###該当のソースコード
すでに上に挙げたjsfiddleのソースコードになります。長いもので申し訳ございませんが、影響範囲や原因が不明なためどこを割愛すべきかかわらず、そのまま掲載させて頂きました。
片方の実行時には、もう片方を完全にリセットするのはどうすべきか、ご協力いただけましたら幸いです。よろしくお願い致します。
html
1<button type="button" class="start" data-type="left">start left</button> 2<button type="button" class="start" data-type="right">start right</button> 3<button type="button" class="reset">reset</button> 4 5<section> 6 <div class="target_left"></div> 7 <div class="target_right"></div> 8</section>
css
1section { 2 display: flex; 3} 4 5div { 6 width: 200px; 7 height: 200px; 8 position: relative; 9 background: gray; 10 margin: 10px; 11} 12 13#box { 14 background: aqua; 15 width: 50px; 16 height: 50px; 17 position: absolute; 18 left: 0; 19 right: 0; 20 margin: 0 auto; 21 border-radius: 0; 22} 23 24.circle { 25 border-radius: 50%; 26} 27
jquery
1// 値をセット 2let intervalAnimation; 3let timeAnimation1, 4 timeAnimation2, 5 timeAnimation3; 6 7// リセットを実行 8$(document).on("click", "button", function() { 9 resetAnimation(); 10}); 11 12// リセットを定義 13function resetAnimation() { 14 $('#box').remove(); 15 $('.target_right').removeClass('circle'); 16 $('.target_left').removeClass('circle'); 17 clearInterval(intervalAnimation); 18 clearTimeout(timeAnimation1); 19 clearTimeout(timeAnimation2); 20 clearTimeout(timeAnimation3); 21} 22 23// アニメーションを実行 24$(document).on("click", "button", function() { 25 resetAnimation(); 26 const type = $(this).attr('data-type'); 27 startAnimation(type); 28}); 29 30// アニメーションを定義 31function startAnimation(type) { 32 intervalAnimation = setInterval(function() { 33 if (type == 'right') { 34 $('.target_right').append('<div id="box"></div>'); 35 $('#box').animate({ 36 'bottom': '10px', 37 'marginRight': '50px' 38 }, { 39 'duration': 1000, 40 'complete': function() { 41 const that = $(this); 42 timeAnimation1 = setTimeout(function() { 43 that.css('width', '10px'); 44 }, 200); 45 timeAnimation2 = setTimeout(function() { 46 $('.target_right').addClass('circle'); 47 }, 400); 48 timeAnimation3 = setTimeout(function() { 49 that.remove(); 50 $('.target_right').removeClass('circle'); 51 }, 800); 52 } 53 }); 54 } else if (type == 'left') { 55 $('.target_left').append('<div id="box"></div>'); 56 $('#box').animate({ 57 'bottom': '-10px', 58 'marginLeft': '50px' 59 }, { 60 'duration': 1000, 61 'complete': function() { 62 const that = $(this); 63 timeAnimation1 = setTimeout(function() { 64 that.css('width', '100px'); 65 }, 200); 66 timeAnimation2 = setTimeout(function() { 67 $('.target_left').addClass('circle'); 68 }, 400); 69 timeAnimation3 = setTimeout(function() { 70 that.remove(); 71 $('.target_left').removeClass('circle'); 72 }, 800); 73 } 74 }); 75 } 76 }, 2000); 77} 78
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/14 07:58