如何缩短动画?

时间:2014-04-03 04:20:25

标签: jquery

我有以下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);
});

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

2 个答案:

答案 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);
    }
});