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

我还将时间随机化了一点，使它看起来更有机。

See example →

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()方法，它非常酷且易于使用。

jQuery同时动画元素

2 个答案: