javascript - 動的に変化する DIv

Question

これは私の最初の投稿です。助けを求めています。

動的にフェードインおよびフェードアウトする複数の div コンテンツがあります。私はこのjsfiddleを手に入れ、2つのdivで機能させましたが、複数、たとえば5つの異なるDIVで機能させる必要があります。

このjsfiddleが最善の方法ですか、それともより良いオプションがありますか。これがコードです。ここにjqueryがあります。

   var fadeinBox = $("#box2");
var fadeoutBox = $("#box1");

function fade() {
    fadeinBox.stop(true, true).fadeIn(2000);
    fadeoutBox.stop(true, true).fadeOut(2000, function() {
        // swap in/out
        var temp = fadeinBox;
        fadeinBox = fadeoutBox;
        fadeoutBox = temp;
        // start over again
        setTimeout(fade, 1000);
    });
}

// start the process
fade();

ここにhtmlがあります

    <div id="wrapper">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
</div>

そしてCSS

.box {
    position: absolute;
    height: 100px;
    width: 100px;
}

#wrapper {position: relative;}

#box1 {background-color: #F00;}
#box2 {background-color: #00F;  display: none;}

事前に感謝します。リンクは以下にあります。

DIV jsfiddle を動的に変更する