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

【问题标题】：How can i recalculate css properties after animation-duration property is done?动画持续时间属性完成后如何重新计算css属性？
【发布时间】：2013-01-24 13:21:07
【问题描述】：

我正在尝试获得泡沫上升的效果，效果很好，看起来还可以。我使用 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 是我正在进行的工作的示例。

【问题讨论】：

标签： jquery css animation

【解决方案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)
}

【讨论】：