###実現したいこと
以下の画像の一枚目にあるOPENボタンをクリックすると、二枚目のようにメッセージボックスが
現れ、上下にスムーズに動くような処理をさせたいです。
###現時点
以下の動作は出来ました。
1.OPENボタンをクリックをするとSUBMITボタンに切り替わる
2.メッセージボックスが現れ、上下に揺れる
###問題点
ボタンクリック->メッセージボックス出現->上下に揺れる
この3つの流れは上手く動作しているのですが、スムーズにオブジェクトが動きません。
何故かカクカクした動きになってしまいます(ボタン付きコードでの動作)。
ボタンとの連動がない場合はスムーズに動くのですが...。
###動作の違い(動画)
動作の違いについての動画
お手数おかけしますが、リンク先からzipファイルのダウンロードをお願いいたします...。
###ボタン付きコード(スムーズに動作しない)
JavaScript/jQuery
1window.onload = function() 2{ 3 var open = document.getElementById("open") 4 open.onclick = open_contact; 5} 6 7//座標の定義 8var x = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 9var y = new Array(20, -20, 20, -20, 20, -20, 20, -20, 20, -20); 10//カウントの定義 11var count = 0; 12var flag = false; 13console.log(flag); 14function open_contact(){ 15 $("#open").removeClass("active").addClass("hidden"); 16 $("#submit").removeClass("hidden").addClass("active"); 17 $("#shake-item").removeClass("hidden").addClass("active"); 18 $("#content").removeClass("hidden").addClass("active"); 19 flag = true; 20 shake(flag); 21} 22function shake(flag){ 23 if(flag){ 24 $("#shake-item").animate({"left":x[count].toString()+"px", "top":y[count].toString()+"px"}, 2000, "swing"); 25 count++; 26 if (count >= x.length) 27 { 28 count = 0; 29 }; 30 }; 31 var id = setInterval(function(){ shake(flag) }, 1000); 32}
###ボタンなしコード(スムーズに動作する)
JavaScript/jQuery
1window.onload = function() 2{ 3 shake(); 4} 5 6//座標の定義 7var x = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 8var y = new Array(10, -10, 10, -10, 10, -10, 10, -10, 10, -10); 9//カウントの定義 10var count = 0 11 12function shake(){ 13 $("#shake-item").animate({"left":x[count]+"px", "top":y[count]+"px"}, 1000, "swing"); 14 count++; 15 if (count >= x.length) 16 { 17 count = 0; 18 }; 19 setTimeout("shake()", 1000); 20}
###HTMLコード
HTML5
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>シェイクテスト|JavaScript</title> 6 <link rel="stylesheet" href="shake.css"> 7 </head> 8 <body> 9 <div class="box"> 10 <div class="hidden" id="shake-item"> 11 <textarea class="hidden" id="content" name="content" placeholder="メッセージ頂戴"></textarea> 12 </div> 13 <input class="active" id="open" type="button" value="OPEN"> 14 <input class="hidden" id="submit" type="button" value="SUBMIT"> 15 </div> 16 <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> 17 <script src="shake.js"></script> 18 </body> 19</html>
あなたの回答
tips
プレビュー