0

Как можно через JS или jQuery увеличивать св-во animation-delay, для каждого последующего элемента. Приведу пример:

<div class="wrapper">
    <div class="c1 animated fadeInScale"></div>
    <div class="c2 animated fadeInScale"></div>
    <div class="c3 animated fadeInScale"></div>
    <div class="c4 animated fadeInScale"></div>
</div>

 <style>
   .animated.fadeInScale.c1 {
        -webkit-animation-delay: 0.2s; 
        animation-delay: 0.2s; 
    }

    .animated.fadeInScale.c2 {
        -webkit-animation-delay: 0.4s; 
        animation-delay: 0.4s; 
    }

    .animated.fadeInScale.c3 {
        -webkit-animation-delay: 0.6s; 
        animation-delay: 0.6s; 
    }

    .animated.fadeInScale.c4 {
        -webkit-animation-delay: 0.8s; 
        animation-delay: 0.8s; 
    }
</style>

Вместо того чтобы засорять css-файл созданием одних и тех же конструкций, хотелось бы сделать тоже самое, но программным путем. Как это можно сделать?

1 ответ 1

2
$('.wrapper') .find('div') .each(function (i) {
      var num = (i % 4) + 1;
      var neely = 700 * parseInt(i);
      $(this).delay(neely).queue(function () {
      $(this).addClass('anim_' + num);
});

Думаю дальше сам поймешь что к чему =)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.