我有三次冲洗,应该从左向右移动。完成第一次冲洗动画后,应开始第二次冲洗动画,第二次冲洗动画完成后,应开始第三次冲洗动画。
这是我的代码: -
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);
});
停止动画,但我不知道如何在点击“开始”按钮时再次恢复动画。
我是这个动画的新手任何帮助将不胜感激。提前致谢