如何暂停然后恢复动画

时间:2013-11-20 10:02:26

标签: jquery animation jquery-animate setinterval

我有三次冲洗,应该从左向右移动。完成第一次冲洗动画后,应开始第二次冲洗动画,第二次冲洗动画完成后,应开始第三次冲洗动画。

这是我的代码: -

flush_1_interval = setTimeout(function(){        
                    $( "#move_flush1" ).animate({ 
                        right: "+=1120px"
                        },{
                            duration : 10000,
                            complete : function()
                            {

                                var is_flush1 = parseInt($('#flush1_present').val());

                                $('#flush_span').hide();

                                if(is_flush1 == 0)
                                {                           
                                    $('.strenght_progress_bar').animate({'width': '+=16.66%'},"slow");

                                    $('#bird1').animate({'width': '+=5%', 'margin-top': '-=5%'},"slow");
                                    $('.plus_animation').show();
                                    $('.plus_animation').html('<img src="images/plus-animation.gif" border="0" />');
                                    setTimeout(function() {
                                        $('.plus_animation').html('');
                                    }, 2000);

                                    $('#move_flush1').hide();


                                    $('#flush_span').hide();

                                    $('.splash-left').show();
                                    //$('#splash_span').show();
                                    if ($('.sound').hasClass("mute"))
                                    {
                                        audioElement.pause();
                                        $('#splash_span').hide();
                                    }
                                    else
                                    {
                                        audioElement.play();
                                        $('#splash_span').show();
                                    }


                                    setTimeout(function() {
                                        $('.splash-right').show();
                                        //$('.splash-right').animate({'right': '+=1120px'},10000);
                                        if ($('.sound').hasClass("mute"))
                                        {
                                            audioElement.pause();
                                            $('#splash_span').hide();
                                        }
                                        else
                                        {
                                            audioElement.play();
                                            $('#splash_span').show();
                                        }

                                    }, 500);

                                    setTimeout(function() {
                                        //audioElement.play();
                                        $('.splash-left').hide();
                                        $('.splash-right').hide();
                                        $('#splash_span').hide();
                                    }, 2000);


                                }

                                flush_2_interval = setTimeout(function(){

                                    $( "#move_flush2" ).animate({ 
                                    right: "+=990px" 
                                    },{
                                        duration : 10000,
                                        complete : function()
                                        {

                                            flush_3_interval = setTimeout(function(){

                                                //$( "#move_flush3" ).animate({ "right": "+=1090px"},10000);

                                                var is_flush2 = parseInt($('#flush2_present').val());

                                                $('#flush_span').hide();

                                                if(is_flush2 == 0)
                                                {
                                                    $('.strenght_progress_bar').animate({'width': '+=16.66%'},"slow");

                                                    $('#bird1').animate({'width': '+=5%', 'margin-top': '-=5%'},"slow");
                                                    $('.plus_animation').show();
                                                    $('.plus_animation').html('<img src="images/plus-animation.gif" border="0" />');
                                                    setTimeout(function() {
                                                        $('.plus_animation').html('');
                                                    }, 2000);

                                                    $('#move_flush2').hide();

                                                    $('.splash').show();

                                                    setTimeout(function() {
                                                        $('.splash').hide();
                                                    }, 1000);

                                                    $('#flush_span').hide();

                                                    //audioElement.pause();
                                                    $('.splash-left').show();
                                                    if ($('.sound').hasClass("mute"))
                                                    {
                                                        audioElement.pause();
                                                        $('#splash_span').hide();
                                                    }
                                                    else
                                                    {
                                                        audioElement.play();
                                                        $('#splash_span').show();
                                                    }

                                                    setTimeout(function() {
                                                        $('.splash-right').show();
                                                        if ($('.sound').hasClass("mute"))
                                                        {
                                                            audioElement.pause();
                                                            $('#splash_span').hide();
                                                        }
                                                        else
                                                        {
                                                            audioElement.play();
                                                            $('#splash_span').show();
                                                        }
                                                    }, 500);

                                                    setTimeout(function() {
                                                        //audioElement.play();
                                                        $('.splash-left').hide();
                                                        $('.splash-right').hide();
                                                        $('#splash_span').hide();
                                                    }, 2000);



                                                }

                                                $( "#move_flush3" ).animate({ 
                                                right: "+=990px" 
                                                },{
                                                    duration : 10000,
                                                    step: function(current_number){
                                                    /* -- to check last 5 sec of game --*/  

                                                        current_time = parseInt($('.countdown_amount').html());
                                                        //alert(current_time);
                                                        if(current_time <= 13 && current_time != 0)
                                                        {
                                                            if ($('.sound').hasClass("mute"))
                                                            {
                                                                $('#beep_span').hide();
                                                            }
                                                            else
                                                            {
                                                                $('#beep_span').play();
                                                            }

                                                        }



                                                    },
                                                    complete : function()
                                                    {

                                                        /*--- Background Music Functionaily --- */

                                                        audioElement.setAttribute('src', 'music/poo01.mp3');
                                                        audioElement.setAttribute('autoplay', 'autoplay');
                                                          audioElement.setAttribute('loop', 'true');
                                                        //audioElement.load()
                                                        $.get();
                                                        audioElement.addEventListener("load", function() {
                                                        audioElement.play();
                                                        }, true);

                                                        /*--- End of background Music Functionaily --- */

                                                        var is_flush3 = parseInt($('#flush3_present').val());

                                                        $('#flush_span').hide();

                                                        if(is_flush3 == 0)
                                                        {   

                                                            $('.strenght_progress_bar').animate({'width': '+=18.98%'},"slow");

                                                            $('#bird1').animate({'width': '+=5%', 'margin-top': '-=5%'},"slow");

                                                            $('.plus_animation').show();
                                                            $('.plus_animation').html('<img src="images/plus-animation.gif" border="0" />');
                                                            setTimeout(function() {
                                                                $('.plus_animation').html('');
                                                            }, 2000);

                                                            $('#move_flush3').hide();

                                                            $('.splash').show();

                                                            setTimeout(function() {
                                                                $('.splash').hide();
                                                            }, 1000);

                                                            $('#flush_span').hide();

                                                            //audioElement.pause();

                                                            $('.splash-left').show();
                                                            if ($('.sound').hasClass("mute"))
                                                            {
                                                                audioElement.pause();
                                                                $('#splash_span').hide();
                                                            }
                                                            else
                                                            {
                                                                audioElement.play();
                                                                $('#splash_span').show();
                                                            }

                                                            setTimeout(function() {
                                                                $('.splash-right').show();
                                                                if ($('.sound').hasClass("mute"))
                                                                {
                                                                    audioElement.pause();
                                                                    $('#splash_span').hide();
                                                                }
                                                                else
                                                                {
                                                                    audioElement.play();
                                                                    $('#splash_span').show();
                                                                }
                                                            }, 500);

                                                            setTimeout(function() {
                                                                //audioElement.play();
                                                                $('.splash-left').hide();
                                                                $('.splash-right').hide();
                                                                $('#splash_span').hide();
                                                            }, 2000);

                                                        }
                                                        if(is_flush1 == 0 && is_flush2 == 0 && is_flush3 == 0)
                                                        {
                                                            $('.strenght_progress_bar').css('border-radius','4px');
                                                        }
                                                    }
                                                });

                                            },7000);
                                        }
                                    });

                                },8000);
                            }
                        });

                    },10000);

工作正常,但现在我有两个按钮 - “暂停”和“开始”。单击“暂停”按钮时,应停止动画,单击“开始”时,应恢复动画。

我试过了: -

$('#pause').click(function()
{
    clearInterval(flush_1_interval);
    clearInterval(flush_2_interval);
    clearInterval(flush_3_interval);

});

停止动画,但我不知道如何在点击“开始”按钮时再次恢复动画。

我是这个动画的新手任何帮助将不胜感激。提前致谢

0 个答案:

没有答案