2

我有十个按钮连续放置（彼此相邻，上边距相同，但左边距彼此不同）。

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

0 回答 0