我们可以在setInterval函数中自动暂停animate（）和resume（）吗？

Question

我想在jquery中使用.setInterval()和.animate()函数给jQuery图像动画。我的代码如下：

$(document).ready(function(){ 
    setInterval(function(){   
    $("#animate1").fadeIn('slow').animate({'margin-left':'220px','margin-bottom':'20px'},2000,function(){ 
    $('.1st').animate({'opacity':'0'},1000,function(){$('.1st').animate({'opacity':'1'}) }) 
    }).fadeOut(); 
    $("#animate1").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-140px'},2000).fadeOut('slow'); 
    },2000); 
    }); 

现在，我想给动画$("#animate2")但在此之前它开始我想是$("#aniamte1")被停止或暂停。所以，赶上$("#animate1")，我想要停止/暂停和运行$("#animate2")，并在完成后我再次$("#animate2")我想暂停/停止并运行$("#animate1")。我们怎么做到这一点？

Answer 1

您可以在动画完成时设置一个变量。 由于从jQuery的文档采取一个例子（请格式化你的代码接下来的时间，这是很难读）：

$(document).ready(function(){ 
    var runAnimate1 = true; 
    var runAnimate2 = false; 
    setInterval(function(){ 
     if(runAnimate1) { 
     $("#animate1").animate({ 
      width: [ "toggle", "swing" ], 
      height: [ "toggle", "swing" ], 
      opacity: "toggle" 
     }, 5000, "linear", function() { 
      runAnimate1 = false; 
      runAnimate2 = true; 
     }); 
     } 

     if(runAnimate2) { 
     $("#animate2").animate({ 
     width: [ "toggle", "swing" ], 
     height: [ "toggle", "swing" ], 
     opacity: "toggle" 
     }, 5000, "linear", function() { 
      runAnimate1 = true; 
      runAnimate2 = false; 
     }); 
    } 
    }); 
}); 

类似的东西应该工作。把它看作伪代码，我没有测试过它，但你应该明白。你只需要采用你的动画，你应该没问题。