更改 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);

滑块手柄的运动是即时的.我希望动作是动画的.这可以通过动画句柄的左"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).

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

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

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屋！