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水平滾動條消失

回答

相關問題