我有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);
}
});
如何设置?
答案 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();
});
我还将时间随机化了一点,使它看起来更有机。
答案 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()
方法,它非常酷且易于使用。