Javascript: 将循环 jQuery 动画放入 js 函数中

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 );

Javascript: 将循环 jQuery 动画放入 js 函数中

Javascript: Putting a looping jQuery animation inside a js function

javascript

jquery

jquery-animate