概要
空中に浮かぶ気球のように、div をゆっくりと上下に移動させたいと思います。
所見
私はこれを思いつき、それに添付された外部スクリプトに注意してください:リンク
問題
1 つ目は、あまり滑らかではなく、壊れているように見えることです。2 つ目は、ご覧のとおり、画像が上下に移動すると押しつぶされたように見えることです。スムーズに動かすにはどうすればいいですか、それとも別の方法がありますか?
わかりました、次に試すことができます:
var baloon = $('#baloon');
function runIt() {
baloon.animate({top:'+=20'}, 1000);
baloon.animate({top:'-=20'}, 1000, runIt);
}
runIt();
css3 アニメーションを使用することをお勧めします。ここでいくつかの例とチュートリアルを見ることができます: http://www.w3schools.com/css3/css3_animations.asp
CSS3 をサポートするブラウザーだけでなく、より多くのサポートが必要な場合は、jQuery の slideUp アニメーションを試してください: http://api.jquery.com/slideUp/
このjQueryライブラリも使用できます