jquery - animation-duration 属性完成后如何重新计算 css 属性？

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

• jsFiddle, sync failure
• jsFiddle, jQuery.animate()