Question

我正在开发一个简单的单页网站，我正在整合jQuery UI Slider。我正在整合它的网站是：Website。

我觉得滑块有点问题。如果在使用左右箭头（或左右键盘键）导航时仔细查看滑块，您会注意到，当向后移动时，在最后一步之前，最小范围会向前跳过几个像素的手柄（背景图片）。

并且附加到手柄的animate属性在使用鼠标光标移动手柄时不起作用，例如手柄位于位置0并且你点击最后一个位置，通常它应该动画到最后一个位置位置，但它跳到那里。

有人能告诉我如何修复这些错误吗？我尝试使用CSS来解决第一个问题，但似乎并不是因为这个问题。

Answer 1

“min range跳到句柄前面” - 我在这里减少了错误：http://jsfiddle.net/jefferyto/Gd5dn/

在为非像素值设置动画时，这是jQuery.animate()中的bug;滑块使用百分比。在动画制作之前，jQuery将元素的起始值（以像素为单位）转换为结束值的单位，并将此非px起始值分配给元素（jQuery 1.7.2中的第8601-8605行（未分析））。

小端值（如0％）的计算存在缺陷，因此范围的起始宽度大于应有的值。

我已经打开pull request并修复了;相同的修复程序可以应用于当前稳定版本的jQuery。

更新：您可以在此处找到修复此错误的插件（适用于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时，才能使用新页码调用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;
    }
}
```
如果这对你有用，请告诉我。

Answer 2

最简单的答案可能是不使用jQueryUI的滑块。

看了你的代码之后，看起来你很容易在JS和CSS上有足够的能力来自己复制它的外观和核心行为，并让它按照你想要的方式工作。

奇怪的jQuery UI Slider行为

2 个答案: