Jquery Javascript中的动画变得异常

我有十个按钮的地方，在一行与（连续彼此有顶部边缘相同，但左边缘不同，相对于彼此）

我有一个主按钮和一个方形图像。当我点击这个主按钮时，方形图像开始从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

$（“#主按钮”）。单击（函数（）{
$（'#square_img'）.clearQueue（）；
$（'#square_img'）。停止（true，true）。设置动画({
排名：4，
左：5
}，0）；//将位置重置为第一个按钮
变量按钮=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“8”、“9”]；
风险值持续时间=[“10”、“100”、“200”、“200”、“100”、“200”、“200”，
"100", "100", "100",
];
var延迟=[“850”、“100”、“100”、“200”、“100”、“80”、“300”、“100”，
"80", "80",
];
jq=null；
位置=空；
i=0；
禁用（）；
audioElement=document.createElement（'audio'）；
setAttribute（'src'，'audio/song.ogg'）；
audioElement.load（）；
audioElement.play（）；
对于（变量i=0；i

请花点时间整理一下您的代码我已经整理了很多，但没有找到任何解决方案www.jsfiddle.net我想这样做当按下Repeat时，它开始异常工作jsfiddle.net/h4JXs/60/下面是另一个示例，它在8或10分钟后开始快速运行