奇怪的jQuery UI滑塊行爲

我正在開發一個簡單的單頁網站，並且我正在整合jQuery UI Slider。我正在整合它的網站是：Website。奇怪的jQuery UI滑塊行爲

看起來好像我滑塊有點問題。如果您在用左右箭頭（或左右鍵盤鍵）導航時仔細觀察滑塊，則會注意到在最後一步之前向後移動時，最小範圍會跳過手柄並顯示幾個像素（背景圖）。

此外，附加到手柄的動畫屬性在使用鼠標光標移動手柄時不起作用，例如手柄處於位置0並且您單擊最後一個位置，通常它應該動畫到最後的位置，但它跳到那裏。

有人能告訴我如何解決這些錯誤？我嘗試過爲CSS的第一個問題，但它似乎並不是因爲這一點。

來源

2012-05-30 Roland

在這個實例中，考慮避免jQueryUI的滑塊，並且你可以實現一個自定義的滑塊。 –

您的網站正在崩潰我的瀏覽器..你可以縮小你想要的並設置一個http://jsfiddle.net/ –

@Vega - 爲什麼會崩潰你的網站？我沒有看到一個理由。也許是因爲數據庫被更新了，這是唯一可能減慢網站速度的事情，它每兩個小時更新一次。 – Roland

「分範圍內向前跳到把手」 - 我已經減少了這裏的錯誤：http://jsfiddle.net/jefferyto/Gd5dn/

這是動畫非像素值時，在jQuery.animate()一個bug;滑塊使用百分比。在動畫之前，jQuery將元素的起始值（以像素爲單位）轉換爲最終值的單位，並將此非px起始值分配給元素（jQuery 1.7.2中的第8601-8605行（未定義））。

對於較小的最終值（如0％），計算存在缺陷，因此範圍的起始寬度比應該大。

我打開了一個pull request修復;同樣的修補程序可以應用於當前穩定版本的jQuery。

更新：你可以找到，修復這個bug（jQuery的1.7.2）插件在這裏：從http://jsfiddle.net/jefferyto/zbkQX/

複製（在頂部）
```
// Start jQuery.animate() fix 
```
到（在測試前代碼）
```
// End jQuery.animate() fix 
```
它應該工作，如果你粘貼到你的plugins.js這段代碼。
「它應該動畫到最後的位置，但它跳到那裏」 - 這是因爲Slider和jPages插件與循環回調連接。

當用戶單擊滑塊時，Slider觸發一個slide事件，然後動畫處理和範圍。 slide事件處理程序調用jPages以更改爲新頁面。 jPages調用其分配的回調函數，該函數將當前頁碼傳遞迴Slider。滑塊設置其值，並開始動畫處理/範圍。

經過slide事件後，Slider返回動畫處理和範圍（實際上是第二次動畫）。滑塊在動畫之前在元素上調用.stop(1, 1)，這會導致第一個動畫停止並立即跳轉到其最終值。（第二.animate()什麼也不做，因爲內容已經在正確的位置。）

（我希望有意義:-)）

我建議在jPages添加邏輯回調調用滑塊與新頁只有當觸發器不是來自Slider時纔是數字。

更新：我認爲你需要更新這兩個回調：

對於滑塊：
```
slide: function(event, ui) { 
    if (!self.paging) { 
     self.paging = true; 
     $(self.shop_navigation_class).jPages(ui.value); 
     self.paging = false; 
    } 
} 
```
對於jPages：
```
callback: function(pages) { 
    var data = { 
     current_page: pages.current, 
     total_pages: pages.count 
    } 
    self.set_local_storage_data(self.data_key, JSON.stringify(data)); 
    if (!self.paging) { 
     self.paging = true; 
     $(self.shop_slider_class).slider("value", pages.current); 
     self.paging = false; 
    } 
} 
```
請讓我知道如果這個作品爲你。

來源

2012-06-03 11:10:56

所以，我看到動畫實際上是一個錯誤。有沒有修復它呢？如果是這樣的話，更新版本的jQuery UI或其他東西？第二部分，你是對的，我認爲這可能是一個問題，但我嘗試了它，但沒有添加回調並獲得相同的結果。那麼，你會怎麼做，你能告訴我這種邏輯的外觀嗎？ – Roland

@ Roland你試過DHTMLX滑塊嗎？ –

@Roland請在上面查看我的更新。 –

最簡單的答案可能是只是不使用jQueryUI的滑塊。

查看了你的代碼後，它看起來像你很容易在JS和CSS上勝任，可以自己複製它的外觀和核心行爲，並使其完全按照你想要的方式工作。

來源

2012-06-01 11:32:38 Alnitak

我必須同意。您/或其他人已經創建了很多JS代碼，因此不會很難創建用於複製滑塊效果的功能。 –

所以我應該嘗試尋找另一種解決方案，而不是使用jQuery UI？但我必須提到，在不同的屏幕尺寸下，根據尺寸的不同，最大步數也會改變。 – Roland

@Roland聽起來更有理由自己寫。你可以依靠jQuery來處理拇指動畫，當然...... – Alnitak

奇怪的jQuery UI滑塊行爲

回答

相關問題