как я могу сократить свою анимацию?

0

У меня есть следующий код 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 ответа

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));
    });
});
Поделиться
  • 0
    тогда другие css, такие как левые и правые значения будут неправильными, все 7 div имеют свои левые и правые значения
  • 0
    @ C-link каждый элемент имеет свой собственный 100% -ый виджет; как бы они мешали?
Показать ещё 9 комментариев
2

Как это?

$('#swipe').on('click',function(){
    for(var i=0;i<7;i++){
        $('.swipe-'+(i+1)).delay(i*1000).animate({width:'100%'},1000);
    }
});
Поделиться
  • 0
    цикл должен начинаться с 1, верно?
  • 3
    @AnoopJoshi - Нет, ноль! Это отличный способ получить нулевую задержку на первой итерации.
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню