2013-10-04 120 views
1

我正在使用Jquery UI滑塊控件創建水平滾動網站。 導航是通過左右按鈕(懸停/單擊滾動)和ui滑塊。JQuery UI滑塊控件中的動畫內容滾動

一切工作正常,除了我在導航通過單擊滑塊時實現平滑滾動時遇到問題。目前它只是跳轉到新的ui.value位置。

我在這裏已經設置一個的jsfiddle:http://jsfiddle.net/stellar/HXgwa/9/以下是我在這個問題位:

margin=Math.round(ui.value/100 * (p - c)); 

if (slideDrag === false){ 
    scrollContent.animate({"margin-left" : margin+"px" }, 300); 
} 

奇怪的是,如果我改變變量「保證金」,以一個確切的數字的過渡動畫,但我似乎無法達到相同的效果,當邊際動態生成。

任何幫助將是真棒,因爲我一直在掙扎幾個小時。

P.S.我是比較新的JavaScript和jQuery,所以我希望我的代碼是達到標準 - 任何反饋歡迎:)

回答

0

如果您註釋掉

scrollContent.animate({"margin-left" : margin+"px" }, 300); 

你會發現滾動條上點擊時scrollContent仍然移動到一個新的位置。 這意味着之後調用動畫將不會執行任何操作,因爲在代碼的其他位置已經更改了margin-left。 因此,您需要檢查是否發生拖動或更改邊緣左側之前。

一個粗略的例子可以在這裏找到(尋找//編輯在兩個地方), http://jsfiddle.net/HXgwa/13/ 我沒有檢查你的代碼只是增加了相關的代碼之前拖動改變利潤率左的條件。

+0

謝謝,這正是我現在期待的:)。 – Stellar

+0

只是一個簡單的問題:在編輯的第169行中,您使用了'return;'在檢查SlideDrag是否爲false之後 - 是否僅僅從函數中返回而沒有執行任何操作? – Stellar

+0

是的,只需返回void即可離開函數。 – melc