1

我有以下小脚本：

<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，如果有区别的话。

小提琴

4

1 回答 1

2

正如其他人评论的那样：您的动画是异步发生的，而您的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/

于 2013-09-27T14:46:41.340 回答