jQuery 轮播滚动不流畅

Question

我正在尝试在 jQuery 中创建一个轮播，它像股票行情一样不断滚动(即:滚动动画中不应该有暂停。)

查看我迄今为止尝试过的 jsFiddle 示例:http://jsfiddle.net/c5VQe/

使用以下代码，我用 3 行代码创建了一个轮播，它完全符合我的要求，只是轮播旋转一次后有一点延迟。

function RotateCarousel() {  
    $("ul li:first-child").animate({ marginLeft: -200  }, 1500, function () {
        $("ul li:first-child").appendTo('ul');
        $("ul li:last-child").css('margin-Left', 0);
        RotateCarousel();
    });
}

如何摆脱这种延迟？

注意:我对使用任何插件不感兴趣。应该可以消除延迟，而无需诉诸大量不必要的代码。

Answer 1

只需将easing选项设置为线性即可:

$("ul li:first-child").animate({ marginLeft: -200 }, 1500, 'linear', function () {
//                                                         ^-- here

Fiddle

由于您之前没有设置过，jQuery 默认将其设置为 swing。

来自.animate()文档:

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear.

<小时/>

旁注:您的 setTimeout() 语法错误，应该是

setTimeout(RotateCarousel, 1500); //passing a function object reference

延迟轮播的初始化。