jQuery水平滚动条消失

Question

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

问题是我想每隔5秒左右走一次。

这是我们正在使用的jQuery

在这里，我尝试使用代码来实现我想要的功能。

    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

如果您使用“动画”功能而不是“ 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);
}

Answer 2

使用喜欢

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

添加'margin-left' : '-970px'而不是双引号

演示版

Answer 3

您必须在函数的css属性中加上引号。 您错过了moveRight和moveLeft函数中margin-left和left属性的引号。

 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);
}