奇怪的jQuery UI Slider行为

Question

我正在开发一个简单的单页网站,我正在集成jQuery UI Slider.我正在整合它的网站是:网站.

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

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

有人能告诉我如何修复这些错误吗？我试图在第一个问题上使用CSS,但似乎并不是因为这个问题.

Answer 1

1. "min range跳到前面" - 我在这里减少了错误:http://jsfiddle.net/jefferyto/Gd5dn/

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

   小端值(如0%)的计算存在缺陷,因此范围的起始宽度大于应有的值.

   我已经用修复程序打开了一个pull请求 ; 相同的修复程序可以应用于当前稳定版本的jQuery.

   更新:你可以在这里找到一个修复这个bug(对于jQuery 1.7.2)的插件:http://jsfiddle.net/jefferyto/zbkQX/

   复制自(在顶部)

   // Start jQuery.animate() fix
   

   到(测试代码之前)

   // End jQuery.animate() fix
   

   如果将此代码粘贴到plugins.js中,它应该可以工作.

2. "它应该动画到最后一个位置,但它会跳到那里" - 这是因为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;
       }
   }
   

   如果这对你有用,请告诉我.