1

我正在尝试获得泡沫上升的效果，而且看起来还不错。我使用 JQuery 随机分配 CSS 属性，例如高度、宽度或动画持续时间。但我想知道在动画持续时间完成后我是否可以重新计算一些属性。

for(var i=1; i<=7; i++)
   {
    var randBottom = Math.ceil(Math.random()*200); 
    var randWidth = Math.ceil(Math.random()*50)+20;
    var randHeight = Math.ceil(Math.random()*100)+200;
    var oceanWidth= $("#ocean").width();
    var randLeft= Math.ceil(Math.random()*(oceanWidth-randWidth));
    var randDuration = Math.ceil(Math.random()*7)+2; 
     var cssObj = {
        'bottom' : randBottom+'px',
         'height' : randHeight+'px',
         'width' : randWidth+'px',
         'left' : randLeft+'px',
         'animation-duration': randDuration+'s',
         '-moz-animation-duration': randDuration+'s',
         '-webkit-animation-duration' :randDuration+'s',
         '-o-animation-duration':randDuration+'s'
        };
    $("#bubble"+i).css(cssObj);
   }

这是我正在进行的工作的示例。

4

1 回答 1

1

我认为这会给你你正在寻找的东西，但似乎保持 css 关键帧持续时间和 javascript 时间难以同步。

你愿意将动画jQuery.animate()改为吗？

for(var i=1; i<=7; i++)
{
    randomizeBubble(i)
}

function randomizeBubble(i)
{
    var randBottom = Math.ceil(Math.random()*200); 
    var randWidth = Math.ceil(Math.random()*50)+20;
    var randHeight = Math.ceil(Math.random()*100)+200;
    var oceanWidth= $("#ocean").width();
    var randLeft= Math.ceil(Math.random()*(oceanWidth-randWidth));
    var randDuration = Math.ceil(Math.random()*7)+2; 
     var cssObj = {
        'bottom' : randBottom+'px',
         'height' : randHeight+'px',
         'width' : randWidth+'px',
         'left' : randLeft+'px',
         'animation-duration': randDuration+'s',
         '-moz-animation-duration': randDuration+'s',
         '-webkit-animation-duration' :randDuration+'s',
         '-o-animation-duration':randDuration+'s'
        };
    $("#bubble"+i).css(cssObj);

    setTimeout(function(){randomizeBubble(i);}, randDuration * 1000)
}
于 2013-01-24T15:52:19.450 回答