jQueryでアニメーションをループさせる方法

アニメーション用のプラグインは色々ありますが、ずっと動き続けていて、なおかつ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の記述に関しては下記の記事を参考にさせていただきました。

Crafting an Animated Postcard With jQuery