jquery水平滚动条消失

我目前正在构建一个网站，其中有一个水平滚动框/条的jquery。jquery水平滚动条消失

事情是我想要每隔5秒左右每隔一段时间一路走。

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

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的原因是滚动框有多大。

任何想法为什么发生这种情况，以及如何使它工作/修复它。

非常感谢

来源

2014-07-01 Ryan Bowden

我不能看到任何小提琴问题。 – Era

小提琴没有问题，它是什么我加入哪个是问题。我希望它自己滚动到每一边。 –

使用像

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

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

Demo

来源

2014-07-01 10:15:58 cracker

你必须把报价在你的函数的CSS属性。您遗漏了moveRight和moveLeft功能中的保证金左侧和左侧属性中的引号。

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

来源

2014-07-01 10:20:29 qtgye

如果您使用'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); 
}

来源

2014-07-01 11:09:36

非常感谢，这是一个非常好的主意，并且使它变得更好。谢谢。 –

@RyanBowden :)一点动画总是很有趣。快乐的编码！ –

jquery水平滚动条消失

回答

相关问题