jQuery同时动画元素

时间:2011-05-07 01:43:42

标签: jquery animation

我有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);
    }
 });

如何设置?

2 个答案:

答案 0 :(得分:5)

我将创建一个简单的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 →

答案 1 :(得分:1)

添加另一个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()方法,它非常酷且易于使用。