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

我想在音频/动画完成后刷新div，但因为这不是定时事件（取决于用户点击键盘的时间）

您可以将刷新功能连接到complete参数：

fadeIn函数：http://api.jquery.com/fadeIn/
animate函数：http://api.jquery.com/animate/

单击事件动画后刷新div

1 个答案: