Question

我正试图获得一个泡沫上升的效果，所以看起来不错。我使用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);
   }

Here是我正在进行的工作的一个示例。

Answer 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)
}

动画持续时间属性完成后如何重新计算css属性？

1 个答案: