javascript - 奇怪的 jQuery UI slider 行为

Question

我正在开发一个简单的单页网站，我正在集成 jQuery UI Slider .我将其集成到的网站是:Website .

看来我的 slider 有点问题。如果您在使用向左和向右箭头(或向左和向右键盘键)导航时仔细观察 slider ，您会注意到当向后移动时，在最后一步之前，最小范围在 handle 前面跳跃了几个像素(背景图 )。

而且附加到 handle 的动画属性在使用鼠标光标移动 handle 时不起作用，也就是说 handle 位于位置 0 并且您单击最后一个位置，通常它应该动画到最后一个位置，但它跳到那里。

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

Answer 1

1. “最小范围跳到 handle 前面”- 我减少了这里的错误:http://jsfiddle.net/jefferyto/Gd5dn/

   这是一个 bug在 jQuery.animate() 中为非像素值设置动画时； slider 使用百分比。在设置动画之前，jQuery 将元素的起始值(以像素为单位)转换为结束值的单位，并将此非像素起始值分配给元素(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 中，它应该可以工作。

2. “它应该动画到最后一个位置但它跳到那里”- 这是因为 Slider 和 jPages 插件与循环回调连接。

   当用户单击 slider 时，Slider 会触发 slide 事件，然后为 handle 和范围设置动画。 slide 事件处理程序调用 jPages 以切换到新页面。 jPages 调用其分配的回调函数，该函数将当前页码传递回 Slider。 slider 设置其值并开始为 handle /范围设置动画。

   在 slide 事件之后，Slider 返回到动画 handle 和范围(这实际上是它第二次动画)。 Slider 在设置动画之前对元素调用 .stop(1, 1)，这会导致第一个动画停止并立即跳转到其结束值。 (第二个 .animate() 什么都不做，因为元素已经在正确的位置。)

   (我希望这是有道理的:-))

   我建议在 jPages 回调中添加逻辑，以便仅当触发器最初不是来自 Slider 时才使用新页码调用 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;
       }
   }
   

   请告诉我这是否适合您。