更改jQuery UI滑块值选项时动画滑块的句柄? [英] Animating slider handle when altering the jQuery UI slider value option?
问题描述
我正在使用jQuery UI(1.8)滑块小部件,以使用户能够水平滑动/滚动一系列图标.有时我想以编程方式移动滑块,而正确的方法是通过更改选项值",例如:
I'm using the jQuery UI (1.8) slider widget to enable the user to slide/scroll a series of icons horizontally. Sometimes I want to move the slider programatically and the correct way to do that is by altering the option "value", like this:
$("#content-slider").slider("option", "value", 37);
不过,滑块手柄的运动是即时的.我希望动起来能动起来.可以通过以下方式在较低级别上实现此效果,方法是为该句柄的"left" CSS属性设置动画,如下所示:
The motion of the slider handle is instant though. I'd like the motion to be animated. This can be done on a lower level, by animating the "left" CSS property of the handle, like this:
$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450);
...但是如果执行此操作,则只将CSS的left属性设置为该句柄.滑块的实际值不受影响.因此,我想到了在设置了该值的动画末尾添加一个回调,如下所示:
...but if I do this, I just set the left property of the CSS for the handle. The actual value of the slider is not affected. So I thought of adding a callback at the end of the animation where the value is set, something like this:
$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450, function() {
// Callback - set the new slider value
$("#content-slider").slider("option", "value", position);
});
当我尝试上面的代码(带有回调)时,我得到一个关于太多递归的jQuery错误,因此我认为这不是完成我想要的(丑陋的代码)的好方法.
When I try the code above (with the callback) I get a jQuery error about too much recursion, so I think that this is not a good way to accomplish what I want (ugly code).
以编程方式更改滑块的值时,是否有更好的方法来使滑块手柄动起来?
提前谢谢! /托马斯·卡恩(Thomas Kahn)
Thanks in advance! /Thomas Kahn
推荐答案
您只需在滑块上启用animate
选项即可完成此操作.从文档中:
You simply enable the animate
option on the slider to accomplish this. From the documentation:
当用户单击工具栏上的外部手柄时,是否可以平滑地滑动手柄.还将接受表示三个预定义速度(慢",正常"或快")之一或运行动画的毫秒数(例如1000)的字符串.
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).
因此,您的代码将如下所示:
Therefore your code will look something like this:
$("#content-slider").slider({
animate: true
});
这是此的实时演示: http://www.jsfiddle.net/VVHGx/
我想我知道您在做什么错-您需要通过.slider('value')
方法而不是.slider('option', 'value
)`方法来更改滑块的值:
I think I know what you're doing wrong - you need to change the value of the slider via the .slider('value')
method instead of the .slider('option', 'value
)` method:
$('#content-slider').slider('value', 42);
这篇关于更改jQuery UI滑块值选项时动画滑块的句柄?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!