Обновление div после анимации события клика

Question

У меня есть веб-страница, которая воспроизводит телефонный разговор после того, как пользователь нажимает на клавиатуру, а также изображения двух, которые ожидают обсуждения, когда каждый из них говорит. Я хочу, чтобы пользователь мог воспроизводить аудио/анимацию (снова нажав клавиатуру) после завершения первоначального аудио/анимации. Я хочу, чтобы div обновлялся после завершения аудио/анимации, но поскольку это не событие времени (это зависит от того, когда пользователь нажимает на клавиатуру), я не могу использовать метод setInterval. Любая помощь будет принята с благодарностью.

$.fn.speak = function(){ 
      $(this).animate({ 
       height:'+=57px', 
       width:'+=57px' 
      }, 500); 
     } 

     $.fn.stopSpeak = function(){ 
      $(this).animate({ 
       height:'-=57px', 
       width:'-=57px' 
      }, 500); 
     } 

     function animateSpeakers(){ 
     $('#claim-rep-5_5').speak(); 
     $('#claim-rep-5_5').delay(4150).stopSpeak(); 

     $('#insured-5_5').delay(4700).speak(); 
     $('#insured-5_5').delay(100).stopSpeak(); 

     $('#claim-rep-5_5').delay(100).speak(); 
     $('#claim-rep-5_5').delay(10250).stopSpeak(); 

     $('#insured-5_5').delay(10250).speak(); 
     $('#insured-5_5').delay(5000).stopSpeak(); 

     $('#claim-rep-5_5').delay(5000).speak(); 
     $('#claim-rep-5_5').delay(6500).stopSpeak(); 

     $('#insured-5_5').delay(6500).speak(); 
     $('#insured-5_5').delay(4500).stopSpeak(); 

     $('#claim-rep-5_5').delay(4500).speak(); 
     $('#claim-rep-5_5').delay(11250).stopSpeak(); 

     $('#insured-5_5').delay(11250).speak(); 
     $('#insured-5_5').delay(9750).stopSpeak(); 

     $('#claim-rep-5_5').delay(9750).speak(); 
     $('#claim-rep-5_5').delay(7000).stopSpeak(); 

     $('#insured-5_5').delay(7000).speak(); 
     $('#insured-5_5').delay(500).stopSpeak(); 

     $('#claim-rep-5_5').delay(500).speak(); 
     $('#claim-rep-5_5').delay(18250).stopSpeak(); 

     $('#insured-5_5').delay(18250).speak(); 
     $('#insured-5_5').delay(3250).stopSpeak(); 

     $('#claim-rep-5_5').delay(3250).speak(); 
     $('#claim-rep-5_5').delay(7500).stopSpeak(); 

     $('#insured-5_5').delay(7500).speak(); 
     $('#insured-5_5').delay(500).stopSpeak(); 

     $('#claim-rep-5_5').delay(500).speak(); 
     $('#claim-rep-5_5').delay(30100).stopSpeak(); 

     $('#insured-5_5').delay(30100).speak(); 
     $('#insured-5_5').delay(17750).stopSpeak(); 

     $('#claim-rep-5_5').delay(17750).speak(); 
     $('#claim-rep-5_5').delay(26750).stopSpeak(); 

     $('#insured-5_5').delay(26750).speak(); 
     $('#insured-5_5').delay(2250).stopSpeak(); 

     $('.click-next').delay(175250).fadeIn(1000); 
     } 

     var processing = false; 

     $('#keypad').on('click', function(){ 
      $('.click-next').hide(); 
      if (!processing) { 
       processing = true; 
       animateSpeakers(function(){ 
       processing = false; 
       }); 
      } 

     }); 


<section> 
     <div id="page-title"> 
      <h2 class="lineheight24">Putting it All Together: <br>Five Customer Service Scenarios</h2> 
     </div><!-- end page-title --> 

     <div id="page-identifier"> 
      <p class="page-number">Page 5.9</p> 
     </div><!-- end page-identifier --> 

     <div class="clear"></div><br> 

     <p class="bold">Scenario 1: &nbsp;Auto Theft - THE NEXT DAY...</p><br> 

     <img onclick="document.getElementById('call-1b').play()" id="keypad" class="float-left" src="IMG/graphic-5_5.gif" alt="" style="margin:13px 0 0 25px; cursor:pointer;" /> 

     <!--[if lt IE 9]> 
      <object id="audioObject" type="audio/x-mpeg" data="call-1b.mp3" autoplay="false" style="display:none;"> 
       <param name="src" value="AUDIO/scenarios/call-1a.mp3" /> 
       <param name="controller" value="false" /> 
       <param name=autoplay" value="false" /> 
       <param name="autostart" value="false" /> 
      </object> 

      <script> 
       document.getElementById('keypad').onclick = function() {document.getElementById('audioObject').play() }; 
      </script> 

     <![endif]--> 

     <p class="col-400 italic" style="margin:30px 0 0 40px;">The following day after completing your research, you place a follow-up phone call to Ms. Kaletta. Click on the telephone keypad to place the call. (To replay, click the keypad again).</p> 

     <div class="clear"></div><br> 

     <img id="claim-rep-5_5" class="absolute" src="IMG/scenario-images/5_5/claim-rep-5_5.jpg" alt="insurance claim representative" width="173" style="top:315px; left:50px;" /> 

     <img id="insured-5_5" class="absolute" src="IMG/scenario-images/5_5/insured-5_5.jpg" alt="insured" width="173" style="top:315px; left:375px;" /> 

     <p class="click-next absolute" style="top:540px; left:25px;">Click next to continue.</p> 
    </section> 

Answer 1

Я хочу ДИВ, чтобы обновить после аудио/анимация завершается, но потому, что это не приурочено событие (это зависит от того, когда пользователь нажимает на клавиатуру)

Вы можете подключить функция обновления для параметра complete:

• функция fadeIn: http://api.jquery.com/fadeIn/
• animate функция: