javascript - jquery水平滚动条消失

Question

我目前正在构建一个具有 jquery 水平滚动框/条的网站。

问题是我想每 5 秒左右一直向右和向左走。

Here the jquery we are using

这里是我试图用来做我想做的事情的代码。

    function MoveRight() {  
        $(".scrollableContent").css({ margin-left: "-970px" });
        $(".ui-slider-handle").css({ left: "100%" });
        t = setTimeout(function(){MoveLeft()}, 5000);
    }

    function MoveLeft() {
        $(".scrollableContent").css({ margin-left: "0px" });
        $(".ui-slider-handle").css({ left: "0%" });
        t = setTimeout(function(){MoveRight()}, 5000);
    }

问题是当我这样做时滚动条消失了。
我使用 Margin-left -970px 的原因是滚动框有多大。

知道为什么会发生这种情况以及如何使其工作/修复。

非常感谢

Answer 1

最好使用'animate' 函数而不是'css' 函数。它会平滑地向左和向右滚动，让人们看到所有的内容，而不仅仅是结束(更好的用户体验) 这是一个 JSFiddle，问题已修复。

http://jsfiddle.net/TGEQf/206/

function MoveRight() {  
    $(".scrollableContent").animate({ 'margin-left': '-500px'}, 4500);
    $(".ui-slider-handle").animate({ left: "100%"}, 4000);
    t = setTimeout(function(){MoveLeft()}, 5000);
}

function MoveLeft() {
    $(".scrollableContent").animate({ 'margin-left': '0px'}, 4500);
    $(".ui-slider-handle").animate({ left: "0%"}, 4000);
    t = setTimeout(function(){ MoveRight() }, 5000);
}