1

泡がゆっくりと画面上部に浮かび上がるような効果を出そうとしていますが、今持っているのはこれです、

http://jsfiddle.net/PMF7k/

（なぜそれが機能しないのかはわかりませんが、私が現在これに取り組むことを計画している方法の要点を理解できます。）

function bubbles() {
$(".bubble").animate({
    'background': "rgba(0,0,0,0.4)",
        'top': '-300px'
}, 200);
}

bubbles();
setInterval(function () {
bubbles();
}, 200);

私の質問は、画面から消えた要素を再利用できる効果的な方法があるかどうかです。たとえば、バブルAがブラウザウィンドウで表示できない場合、バブルAは一番下に移動し、そのサイクルをもう一度繰り返しますか？

また、簡単な副次的な質問として、jQueryを介してアニメーション化し、関数でラップし、setIntervalを使用して常に呼び出すのが最善ですか？

4

1 に答える 1

0

jqueryのアニメーション

http://api.jquery.com/animate/

アニメーションの完了時に呼び出されるコールバック関数を指定できます。

バブルの位置をリセットするコールバックをセットアップし、そのコールバックを animateの完全なパラメーターとして指定します。

また、コールバックで animate を再度呼び出してアニメーションを再開する必要があります (setInterval は必要ありません)。

オプションで、初期位置 (x と y)、速度、色などをランダムに変更できます。

好きなだけバブルを追加し、それぞれにanimate jquery メソッドを呼び出します。

ところで：jqueryをロードするように指定しなかったため、jsfiddleは機能しません

于 2013-02-24T20:08:31.350 に答える