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>

我已经尝试了几次这样的迭代，虽然我可以得到一个字符串，但每当我使用上面的数组时，它会循环正确的次数但总是在每个循环上显示相同的文本元素。 / p>

此外，上面的css（）调用似乎不起作用，但如果我使用相同的右偏移量（和1毫秒时间值）调用animate（）来替换它，那就可以了。

目标只是循环遍历数组的所有元素，依次滚动每个元素。我不确定我做得不好。

我的浏览器是Windows 7下的Chrome，如果这有所不同。

Fiddle

Answer 1

正如其他人所评论的那样：您的动画是异步发生的，而您的for循环同时发生。您需要使用.animate回调函数将它们绑定在一起。像这样：

function anim(arr, idx) {
    if (idx < arr.length) {
        var txt = arr[idx];
        $('div.news').text(txt).css({
            right: 0 - $('div.news').width()
        });
        $('div.news').animate({
            right: $(document).width()
        }, 10000, function () {
            anim(arr, idx + 1);
        });
    }
}
anim(messages, 0);

http://jsfiddle.net/mblase75/ZLHWy/

jquery动画循环不工作？

1 个答案: