我有以下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);
});
我可以缩短上面的代码吗?
答案 0 :(得分:3)
您可以使用像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));
});
});
答案 1 :(得分:2)
喜欢这个吗?
$('#swipe').on('click',function(){
for(var i=0;i<7;i++){
$('.swipe-'+(i+1)).delay(i*1000).animate({width:'100%'},1000);
}
});