Jquery 单击事件动画后刷新div

我有一个网页，在用户点击键盘后播放电话对话，还有两个人的图像，当他们每个人都在讲话时，他们的讨论都会变得生动。我希望用户能够在初始音频/动画完成后重播音频/动画（再次单击键盘）。我希望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>

$.fn.speak=函数（）{
$（此）。设置动画({
高度：'+=57px'，
宽度：'+=57px'
}, 500);
}
$.fn.stopSpeak=函数（）{
$（此）。设置动画({
高度：'-=57px'，
宽度：'-=57px'
}, 500);
}
函数animateSpeakers（）{
$（'#claim-rep-5_5'）.speak（）；
$（'#claim-rep-5_5'）。延迟（4150）。停止讲话（）；
$（'#被保险人-5_5'）。延迟（4700）。说（）；
$（“#被保险人-5_5”）。延迟（100）。停止讲话（）；
$（'#claim-rep-5_5'）.delay（100）.speak（）；
$（'#claim-rep-5_5'）。延迟（10250）。停止讲话（）；
$（'#被保险人-5_5'）。延迟（10250）。说（）；
$（'被保险人-5'U 5'）。延迟（5000）。停止讲话（）；
$（'#claim-rep-5_5'）。延迟（5000）。说话（）；
$（'#claim-rep-5_5'）。延迟（6500）。停止讲话（）；
$（'投保-5'.'延迟（6500）.speak（）；
$（'被保险人-5'U 5'）。延迟（4500）。停止讲话（）；
$（'#claim-rep-5_5'）.delay（4500.speak（）；
$（'#claim-rep-5_5'）。延迟（11250）。停止讲话（）；
$（'#被保险人-5_5'）。延迟（11250）。说（）；
$（“#被保险人-5_5”）。延迟（9750）。停止讲话（）；
$（'#claim-rep-5_5'）.delay（9750.speak（）；
$（'#claim-rep-5_5'）。延迟（7000）。停止讲话（）；
$（'#被保险人-5_5'）。延迟（7000）。说（）；
$（'被保险人-5'U 5'）。延迟（500）。停止讲话（）；
$（'#claim-rep-5_5'）.delay（500）.speak（）；
$（'#claim-rep-5_5'）。延迟（18250）。停止讲话（）；
$（'投保-5'.'延迟（18250）.speak（）；
$（'被保险人-5'U 5'）。延迟（3250）。停止讲话（）；
$（'#claim-rep-5_5'）.delay（3250.speak（）；
$（'#claim-rep-5_5'）。延迟（7500）。停止讲话（）；
$（'被保险人-5'u 5'）。延迟（7500）。说（）；
$（'被保险人-5'U 5'）。延迟（500）。停止讲话（）；
$（'#claim-rep-5_5'）.delay（500）.speak（）；
$（'#claim-rep-5_5'）。延迟（30100）。停止讲话（）；
$（'投保-5'u 5'）。延迟（30100）。说话（）；
$（'被保险人-5'U 5'）。延迟（17750）。停止讲话（）；
$（'#claim-rep-5_5'）。delay（17750）。speak（）；
$（'#claim-rep-5_5'）。延迟（26750）。停止讲话（）；
$（'被保险人-5'U 5'）。延迟（26750）。说（）；
$（'被保险人-5'U 5'）。延迟（2250）。停止讲话（）；
$（'.click next'）.delay（175250）.fadeIn（1000）；
}
var处理=假；
$（'键盘'）。在（'单击'，函数（）上）{
$（'.click next'）.hide（）；
如果（！处理）{
处理=真；
动画说话者（函数（）{
处理=假；
});
}
});
综合起来：
五种客户服务场景
第5.9页


场景1：汽车盗窃-第二天…


完成研究后的第二天，你给卡莱塔女士打了一个跟进电话。单击电话键盘以拨打电话。（要重播，请再次单击键盘）


单击下一步继续

我希望div在音频/动画完成后刷新，但这不是一个定时事件（取决于用户单击键盘的时间）

您可以将刷新功能连接到以下的

complete

参数：

• fadeIn

  功能：

• 设置动画

  功能：

---

如果不告诉我们您最初是如何构建的，您又怎么能期望任何人知道如何修复它呢？请先发布一些代码，然后我们再讨论一些问题。