javascript - 我怎样才能附加一个标记到 a 的末尾在屏幕外（溢出）空间？

Question

我有一个脚本可以将图像的无序列表转换为水平滚动的轮播，但它的行为不正常！这里...

setInterval(function(){
    $('#scroller ul li:first').animate({
        marginLeft : '-165px'
    }, 2000, 'linear', function() {
        // OnComplete
        $(this).css('margin-left', '0').appendTo('#scroller ul');
    });
}, 2000);

基本上它将第一个滑到<li>左边，然后将它移动到<ul>.

问题是它没有正确重置边距，因此它最终覆盖了先前的最后一个列表元素。在下一轮动画中，它会跳到右边，但当然会立即与下一个动画 + 覆盖<li>。

它的<ul>宽度设置为允许一个图像“屏幕外”的空间，但附加似乎错过了这个空间，只是把它放在可见渲染空间的末尾！

请问有什么建议吗？

（灵感来自 Snook.ca最简单的 jQuery 幻灯片）

Answer 1

.stop()如果您在设置 css 值之前添加 a ，它将起作用：

$(this).stop().css('margin-left', '0').appendTo('#scroller ul');

我做了一个jsFiddle。