jQuery同步動畫元素

我有2個元素與類wave-bar。（其實更多，但對於這個例子的目的假設2）jQuery同步動畫元素

下面的代碼更改元素隨機值（以創建波形（認爲音頻播放器）效果）的高度。

的代碼目前變化高度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); 
    } 
});

如何設置？

來源

2011-05-07 PeeHaa

爲什麼不能用[.animate（）]（http://api.jquery.com/animate/）？ – Pablo 2011-05-07 01:52:48

它吮吸!!!!!!任何想法如何運行它10K次，而不會搞亂我的電腦？：P – PeeHaa 2011-05-07 02:09:05

我想創建一個簡單的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 →

來源

2011-05-07 04:58:52 mVChr

非常非常好！ – PeeHaa 2011-05-07 11:13:43

添加另一個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()方法，這是非常冷靜和易於使用。

來源

2011-05-07 01:48:47

以上沒有工作。雖然使用你的建議（動畫）。所以我用動畫函數替換了超時函數。感謝那。但我並沒有在第一時間使用動畫的原因是因爲我雖然它會對性能產生影響。你知道它現在正在運行，但它完全吃掉我的CPU和我的內存：P任何想法如何改進它？ – PeeHaa 2011-05-07 02:07:47

jQuery同步動畫元素

回答

相關問題