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