javascript - jqueryアニメーションループが機能していませんか?

Question

次の小さなスクリプトがあります。

<script>
    $(document).ready(function() {
        var messages = [
            "Test 0",
            "--- Test 1",
            "------------- Test 2",
            "--------------------------- Test 3"
        ];
        function anim() {
            $('div.news').css({
                right: 0 - $('div.news').width() // reset to off-screen
            });
            $('div.news').animate({ // call animate function on elements with class="scroll"
                right: $(document).width() // animates right value from the original to the documents width (ie if elements right value = the document width, then element is off screen)
            }, 10000); // 10000 is duration in milliseconds (ie 10 seconds)
        }
        for( var msg_loop = 0; msg_loop < messages.length; msg_loop ++ ) {
            $('div.news').text( messages[msg_loop] );
            anim();
        }
    });
</script>

この単純な CSS ブロックを使用して:

<style type="text/css">
    .news {
        border: none;
        position: absolute;
        white-space: nowrap;
        text-align: center;
        background-color: rgba(0,0,0,0.1);
        color: #60FF60;
        right: -900px;
        width: 900px;
    }
</style>

そして、以下の小さな HTML div:

<div id="newsdiv" class="news">
    Invalid test data
</div>

これを何度か繰り返してみましたが、単一の文字列を機能させることができますが、上記のように配列を使用するたびに、正しい回数ループしますが、ループごとに常に同じテキスト要素が表示されます.

さらに、上記の css() 呼び出しは機能していないようですが、同じ右オフセット (および 1 ミリ秒の時間値) を使用して animate() への呼び出しに置き換えると、機能します。

目標は、配列のすべての要素をループして、それぞれを順番にスクロールすることです。何が正しくないのかわかりません。

それが違いを生む場合、私のブラウザはWindows 7のChromeです。

フィドル