jquery - Javascript でアニメーションが異常になる

Question

私は10個のボタンを一列に並べています（互いに関連する上マージンは同じですが、左マージンは互いに異なります）。

メイン ボタンと正方形の画像があります。このメイン ボタンをクリックすると、正方形の画像が 1 個から 10 個のボタンに移動し始めます。

メインボタンが初めてクリックされたとき、またはアニメーションの完了後にアニメーションが正しく動作するようになりました。しかし、メインボタンを何度もクリックすると、最初のボタンからアニメーションが開始されますが、四角いボタンは速すぎます。

問題は、アニメーションが速すぎるためにアニメーションと一致しない異常音が発生したときに、そのアニメーションの曲があることです。

なぜこれが起こっているのか、これを解決する方法を理解できません。この問題についてよく検索しましたが、満足のいく解決策が見つかりませんでした。

これが私の完全な仕事です：

HTML

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 65px;"
     id="1"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 195px;"
     id="2"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 325px;"
     id="3"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 445px;"
     id="4"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 570px;"
     id="5"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 690px;"
     id="6"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 810px;"
     id="7"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 940px;"
     id="8"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 1045px;"
     id="9"></button>

<button class="stage"
    style="width: 80px; height: 90px; margin-left: 1160px;"
     id="10"></button>

<img id="square_img" src="./images/overlay_rect.png"
    style="margin-left: 65px" />

<button class="Main_Button"
    style="width: 250px; height: 98px; margin-left: 950px; margin-top: 310px; border: thin;"
     id="main_button"></button>

JS

$("#main_button").click( function() {

$('#square_img').clearQueue();

$('#square_img').stop(true,true).animate({
    top : 4,
    left : 5
}, 0); //Resetting position to the first button

var button = [ "1", "2", "3", "4", "5", "6", "7", "8", "8", "9" ];

var duration = [ "10", "100", "200", "200", "100", "200", "200",
    "100", "100", "100",
     ];


var delay = [ "850", "100", "100", "200", "100", "80", "300", "100",
    "80", "80",
                 ];

jq = null;
position = null;
i = 0;

Disable();
audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/song.ogg');
audioElement.load(); 
audioElement.play();

for ( var i = 0; i < button.length; i++) {
    var jq = $("#" + button[i]);
    var position = jq.offset();
    if (i == 11 || i == 12 || i == 13 || i == 14) {
        $('#square_img').stop().animate({
            top : position.top,
            left : (position.left - 70)
        }, 60);
        $('#square_img').delay(10);
    }
    else {
        $('#square_img').stop().animate({
            top : position.top,
            left : (position.left - 70)
        }, duration[i]);
    $('#square_img').delay(delay[i]);
    }
}

$('#square_img').stop().animate({
    top : 4,
    left : 5
}, 0);//Resetting position to the first button