如何缩短动画？

问题描述

我有以下jquery代码：

I've the following jquery code:

$('#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);
});

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

Can I shorten my above code?

推荐答案

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

You can use a common class like swipe instead of making 7 different classes:

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

在这里可能不起作用，因为动画没有队列，所以 setTimeout 是更好用，比如，

delay() may not work here because there is no queue of animation, so setTimeout is better to use like,

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

这篇关于如何缩短动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！