更改jQuery UI滑块值选项时动画滑块手柄？

Question

我正在使用jQuery UI(1.8)滑块小部件来使用户能够水平滑动/滚动一系列图标.有时我想以编程方式移动滑块,正确的方法是通过更改选项"value",如下所示:

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

滑块手柄的动作是即时的.我希望动画能够动画.这可以通过动画句柄的"左"CSS属性在较低级别完成,如下所示:

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

...但是如果我这样做,我只需为句柄设置CSS的左属性.滑块的实际值不受影响.所以我想在动画结尾处添加一个回调函数,其中设置了值,如下所示:

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

当我尝试上面的代码(使用回调)时,我得到一个关于过多递归的jQuery错误,所以我认为这不是一个完成我想要的好方法(丑陋的代码).

当以编程方式更改滑块的值时,是否有更好的方法为滑块手柄设置动画？

提前致谢!/ Thomas Kahn

Answer 1

您只需启用animate滑块上的选项即可完成此操作.从文档:

当用户点击栏上的外部手柄时是否平滑滑动手柄.还将接受表示三种预定义速度之一("慢","正常"或"快速")或运行动画的毫秒数(例如1000)的字符串.

因此,您的代码看起来像这样:

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

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

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

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