我怎样才能缩短我的动画？

我有以下jquery代码：

$('#swipe').on('click',function(){ $('.swipe-1').animate({width:'100%'},1000); $('.swipe-2').delay(1000).animate({width:'100%'},1000); $('.swipe-3').delay(2000).animate({width:'100%'},1000); $('.swipe-4').delay(3000).animate({width:'100%'},1000); $('.swipe-5').delay(4000).animate({width:'100%'},1000); $('.swipe-6').delay(5000).animate({width:'100%'},1000); $('.swipe-7').delay(6000).animate({width:'100%'},1000); }); 

我可以缩短上面的代码吗？

Answer 1

您可以使用像swipe这样的公共类，而不是使用7个不同的类：

 $('#swipe').on('click',function(){ $('.swipe').each(function(i,v){ $(this).delay(i*1000).animate({width:'100%'},1000); }); }); 

delay（）可能无法在这里工作，因为没有动画queue ，所以setTimeout更好用，比如

 $('#swipe').on('click',function(){ $('.swipe').each(function(i,v){ var $this=$(this); setTimeout(function(){ $this.animate({width:'100%'},1000); },(i*1000)); }); }); 

Answer 2

像这样 ？

 $('#swipe').on('click',function(){ for(var i=0;i<7;i++){ $('.swipe-'+(i+1)).delay(i*1000).animate({width:'100%'},1000); } });