我正在使用 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/