以编程方式分配滑块值时无法实现平滑的手柄动画 - jQuery UISlider

Question

我正在使用 jQuery UISlider。我进行了设置，以便在执行“slidestop”事件时（即当用户停止滑动时），一些代码将确定它是否高于或低于滑块范围内的给定值。然后代码确定滑块最接近给定值中的哪一个，然后尝试将滑块手柄移动到该点。所有这些基本上都工作正常。这是我的困境：

手柄不会动画到新位置，而是跳转到那里。我正在使用这行代码来移动手柄：

$("#navScroller").slider('value', newScrollerValue);

其中 newScrollerValue 是逻辑决定需要发送到的句柄的值。

如果我在绑定到页面元素的点击事件中使用同一行代码（但为 newScrollerValue 提供了一个测试值），则句柄将动画到新位置应该。但是将它放在 slidestop 事件的回调方法中会使其跳转到新位置，而不是平滑地设置动画。

我希望这足以解释清楚。有什么想法可以在 slidestop 事件中为以编程方式分配的值实现平滑的手柄动画？

Answer 1

在拖动手柄期间，动画可能会在内部被禁用，看看您是否可以在事件触发后在新的上下文中执行该操作：

$("#navScroller").bind("slidestop", function (event, ui) {
   setTimeout(function () {
     //perform the required logic here
     $("#navScroller").slider('value', newScrollerValue);
   },10);
});