アニメーション用のプラグインは色々ありますが、ずっと動き続けていて、なおかつIE7,8あたりも対応している方法はないものか。と探して行き着いた方法がこちらです。
※2020年5月18日 サンプルが表示されなくなっていたので修正しました
基本的な設定
まずはjQueryライブラリを読み込みましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
上下にふわふわ動かす
javaScript(jQuery)
animate関数で上部のmarginを0.8秒かけて10px上に動かし、0.8秒かけて10px下げてるというのを1.6秒（0.8+0.8秒）で繰り返しています。
CSSの表記などは上記のタブからご確認ください。
$(function () {
setTimeout('rect()'); //アニメーションを実行
});
function rect() {
$('#rect').animate({
marginTop: '-=10px'
}, 800).animate({
marginTop: '+=10px'
}, 800);
setTimeout('rect()', 1600); //アニメーションを繰り返す間隔
}
左右に動かす
javaScript(jQuery)
動かす要素の初期位置を、CSSで親要素の外（-50px）に指定しています。
そこから3秒かけて左へ350px動かして、また開始位置の-50pxへ戻すのをjsで指定しているのが下記です。
$(function () {
setTimeout('rect()'); //アニメーションを実行
});
function rect() {
$("#rect").animate({
left: "350px" //要素を動かす位置
}, 3000).animate({
left: "-50px" //要素を戻す位置
}, 0)
setTimeout("rect()", 3000);//アニメーションを繰り返す間隔
}
透過率を変える
javaScript(jQuery)
2秒かけて透過率を0.3にし、また2秒かけて1.0に戻しています。
$(function () {
setTimeout('rect()'); //アニメーションを実行
});
function rect() {
$("#rect").animate({
opacity: ".3"
}, 2000).animate({
opacity: "1"
}, 2000);
setTimeout("rect()", 4000); //アニメーションを繰り返す間隔
}
上記の方法を組み合わせて作ったのがこちらです。
なお、jQueryの記述に関しては下記の記事を参考にさせていただきました。
