奇怪的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滑块行为

回答

相关问题