Question

我正在处理我的网页中需要的一些jquery动画。所以，我在下面构建了一个jquery：

$(document).ready(function(){ 
   var runAnimate1= true; var runAnimate2=false; var runAnimate3=false;
   setInterval(function(){

       if(runAnimate1){
   $("#animate1").fadeIn('slow').animate({'display':'inline-block','margin-left':'283px','margin-bottom':'9px'},500,function(){ 
   $('.1st').animate({'opacity': '0'},1000,
    function(){$('.1st').animate({'opacity':'1'}) })
   }).fadeOut();
   $("#animate1").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-140px'},1000,function(){runAnimate1 = false; runAnimate2 = true; runAnimate3 = false;})
       .fadeOut('slow').clearInterval(5100);
   } // my first animation

       if(runAnimate2){
   $(".2nd").fadeIn('slow').animate({'margin-left':'200px','margin-bottom':'2px'},600,function(){$('.1st').animate({'opacity':'0'},1000,
   function(){$('.1st').animate({'opacity':'1'},1000)})}).fadeOut();  
   $(".2nd").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-150px'},1000,function(){runAnimate1 = false; runAnimate2 = false; runAnimate3 = true})
   .fadeOut('slow').clearInterval(1000);
                      } // my second animation

       if(runAnimate3){
   $('.3rd').fadeIn('slow').animate({'display':'inline-block','margin-left':'220px','margin-bottom':'2px'},1000,function(){ 
   $('.1st').animate({'opacity': '0'},1000,
    function(){$('.1st').animate({'opacity':'1'})})
   }).fadeOut('slow');
   $('.3rd').fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-220px'},1000,function(){runAnimate1 = true; runAnimate2 = false; runAnimate3 = false;})
       .fadeOut('slow').clearInterval(1000);

       } //my third animation

   },6000);
    });

所以，我在一个setInterval中有3个动画。现在，查询是所有三个动画都没有正确维护间隔，有时它重叠（意味着在完成第一个动画之前，第二个将开始）。怎么解决这个？请指导我..提前... !!

动画在Jquery setInterval中重叠

0 个答案: