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中停止动画并设置＆＃34; jumpToEnd＆＃34;标记为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函数中

1 个答案: