[JavaScript, jQuery]ボタンクリックでオブジェクトを上下に"スムーズに"動かしたい

###実現したいこと
以下の画像の一枚目にある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>