jquery - 更改 jQuery UI slider 值选项时动画 slider handle ？

Question

我使用 jQuery UI (1.8) slider 小部件来使用户能够水平滑动/滚动一系列图标。有时我想以编程方式移动 slider ，正确的方法是更改​​选项“值”，如下所示:

$("#content-slider").slider("option", "value", 37);

slider handle 的运动是即时的。我希望该动议被动画化。这可以在较低级别上完成，通过对 handle 的“left”CSS 属性进行动画处理，如下所示:

$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450);

...但是如果我这样做，我只需为句柄设置 CSS 的 left 属性。 slider 的实际值不受影响。所以我想到在设置值的动画末尾添加一个回调，如下所示:

$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450, function() {
    // Callback - set the new slider value
    $("#content-slider").slider("option", "value", position);
});

当我尝试上面的代码(带有回调)时，我收到一个关于递归过多的 jQuery 错误，所以我认为这不是完成我想要的事情的好方法(丑陋的代码)。

当以编程方式更改 slider 的值时，是否有更好的方法来为 slider handle 设置动画？

提前致谢! /托马斯·卡恩

Answer 1

您只需启用 slider 上的animate选项即可完成此操作。来自文档:

Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

因此您的代码将如下所示:

$("#content-slider").slider({
    animate: true
});

这是一个现场演示:http://www.jsfiddle.net/VVHGx/

<小时/>

我想我知道你做错了什么 - 你需要通过 .slider('value') 方法而不是 .slider(' 来更改 slider 的值选项','值)`方法:

$('#content-slider').slider('value', 42);