Javascript：在 js 函数中放置一个循环的 jQuery 动画

Question

我想在 js 函数中嵌套一个循环的 jQuery 动画函数，但我不知道该怎么做。

我有一个音频文件，在单击 div 时播放（如果再次单击 div 则暂停），同时 div 文本从播放符号变为暂停符号。我想在播放音乐时为另一个 div 设置动画，并在音乐暂停时停止动画。

这是我的音频功能代码：

function play() {
    var audio = document.getElementById('whatchaDoin');

    if (audio.paused) {
        audio.play();
        document.getElementById('playButton').innerHTML = '\u2016';

    } else {
        audio.pause();
        document.getElementById('playButton').innerHTML = '\u25BA';
    }
}

这是我的动画：

$(document).ready(function() {
    function animateBox() {
        $('#greenBox').animate({
            'margin-top': '20px',
            'height': '150px',
            'width': '150px'
        }, 195).animate({
            'margin-top': '30px',
            'height': '140px',
            'width': '140px'
        }, 390, animateBox);
    }
    animateBox();
});

我似乎找不到在不破坏播放功能的情况下将它们组合在一起的方法。 感谢您能给我的任何帮助！

Answer 1

这应该可行。我没有用音频对象尝试过，但动画循环应该是正确的。这是一个没有音频对象的 jsFiddle： https://jsfiddle.net/5fwdcq37/1/

下面的代码应该是带音频的，重要的是要知道，当你在 jquery 中停止动画并将“jumpToEnd”标志设置为true 时，它将触发完整的函数。在您之前的示例中，它将再次启动动画循环，因此您将永远无法停止它。因此，您需要添加一个额外的变量 loop 来检查它是否应该循环：

function play() {
    var audio = document.getElementById('whatchaDoin');

    if (audio.paused) {
        audio.play();
        document.getElementById('playButton').innerHTML = '\u2016';
        startAnimation();

    } else {
        audio.pause();
        document.getElementById('playButton').innerHTML = '\u25BA';
        stopAnimation();
    }
}

var loop = false;
function startAnimation(){
   loop = true;
   $('#greenBox').animate({
            'margin-top': '20px',
            'height': '150px',
            'width': '150px'
        }, 195).animate({
            'margin-top': '30px',
            'height': '140px',
            'width': '140px'
        }, 390, function(){ if(loop){ startAnimation(); } });
}

function stopAnimation(){
  loop = false;
  $('#greenBox').stop( true, true );
}

$( "#playButton" ).click( play );