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

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

滑块 handle 的运动是即时的。我想要动画。这可以在较低级别上完成,通过为句柄的“左”CSS 属性设置动画,如下所示:
$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450);

...但如果我这样做,我只需为句柄设置 CSS 的 left 属性。滑块的实际值不受影响。所以我想在动画结束时添加一个回调,在那里设置值,像这样:
$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450, function() {
    // Callback - set the new slider value
    $("#content-slider").slider("option", "value", position);
});

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

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

提前致谢!
/托马斯·卡恩(Thomas Kahn)

最佳答案

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



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

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

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

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

关于jquery - 更改 jQuery UI 滑块值选项时动画滑块句柄?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4123067/

10-10 00:11
查看更多