jQuery水平滚动条消失

Question

I am currently building a website that has a jquery horizontal scroll box / bar.

The thing is I want to go all the way right and left every so often around every 5 seconds.

Here the jquery we are using

Here the code I have tried to use to do what I want it to do.

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

Issue is that the scroll bar disappears when I do this.
The reason that I use Margin-left -970px is that is how large the scroll box is.

Any idea why this is happening and how to make it work / fix it.

Many Thanks

Answer 1

It'd be better if you use the 'animate' function, instead of the 'css' function. It'll smoothly scroll to the left and to the right, allowing people to see all of the content, instead of just the ends (better User-Experience) Here's a JSFiddle, with the issues fixed.

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

Use Like

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

Add 'margin-left' : '-970px' instead of Double Quotes

Demo

Answer 3

You have to put quotes in the css property in your functions. You missed the quotes on margin-left and left property in your moveRight and moveLeft funcitons.

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