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 に答える