Animate.css 和音頻

Question

如果音頻暫停，我在播放動畫時會遇到問題。 我只希望動畫在播放音頻時起作用。 當我暫停音頻時，我不想要任何動畫。

小提琴： https : //jsfiddle.net/jzhang172/n7xqz3d0/1/

 $(function(){ var audiocircle= $("#audio")[0]; //audio variable $('.box').click(function(){ if (audiocircle.paused){ audiocircle.play(); animationClick('.box','jello'); function animationClick(element, animation){ element = $(element); element.click( function() { element.addClass('animated ' + animation); //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); } ); }; } else { audiocircle.pause(); } }); });

 .box{ background:green; height:300px; width:300px; border:2px solid red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/> <div class="box"> <audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3"></audio> <p> Jesus What </p> </div>

Answer 1

我創建了一個 JSFiddle 示例。 我已將var從status更新為mstatus因為我認為它造成了沖突。

代碼：

 var mstatus = 1; $('.control').on('click',function(){ var e = document.getElementById("audio"); if(mstatus === 1){ e.play(); $('.control').addClass('animated shake'); mstatus = 2; }else{ e.pause(); $('.control').removeClass('animated shake'); mstatus = 1; } });

 .control{ width:100px; height:100px; background:blue; cursor:pointer; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="control"> <audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3"></audio> </div>