jQuery одновременная анимация на элементах

Question

У меня есть 2 элемента с классом wave-bar. (На самом деле больше, но ради примера скажем 2)

Приведенный ниже код изменяет высоту элементов на случайные значения (для создания эффекта формы волны (например, аудиоплеера)).

Код в настоящее время изменяет высоту 10000 раз для первого элемента, а когда он завершается, он включается и изменяет высоту второго элемента.

Однако я бы хотел, чтобы оба элемента получили случайную высоту одновременно. Чтобы анимация второго элемента не дожидалась окончания первого.

  $('.wave-bar').each(function() {

    var bar = $(this);

    for (var i=0;i<=10000;i++) {
      window.setTimeout(function() {
        var rand_no = Math.floor(Math.random()*19);

        bar.height(rand_no);
        bar.css('margin-top', (18-rand_no)+'px');
      }, 500);
    }
 });

Как это настроить?

Answer 1

Я бы создал простой плагин jQuery и применил бы его к каждому элементу примерно так:

$.fn.pulseRandom = function () {
    var repulse = function ( $elem ) {
        var rand = Math.floor( Math.random() * 100 ),
            time = Math.floor( Math.random() * 250 ) + 250;

        $elem.animate({ height: rand, 'margin-top': 100 - rand }, time - 1);

        setTimeout(function(){ repulse( $elem ); }, time);
    };

    repulse( this );
};

$('.wave-bar').each(function(i,ele){
    $(ele).pulseRandom();
});

Я также немного рандомизировал время, чтобы оно выглядело более органично.

См. Пример & # x2192;

Answer 2

Добавление другого setTimeout. Как это:

$('.wave-bar').each(function() {

    var bar = $(this);
    setTimeout(function(){  //Added this setTimeout
      for (var i=0;i<=10000;i++) {
         window.setTimeout(function() {
           var rand_no = Math.floor(Math.random()*19);

           bar.height(rand_no);
           bar.css('margin-top', (18-rand_no)+'px');
         }, 500);
       }
    },0);

 });

Это создаст отдельные «потоки» для каждого элемента, поэтому они будут анимироваться одновременно.

Приветствия

PS: Если вы используете jquery, вы должны проверить метод .animate(), он очень классный и простой в использовании.