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

我正在使用jQuery UI（1.8）滑块小部件来使用户能够水平地滑动/滚动一系列图标。有时候我想以编程方式移动滑块和做正确的方法是通过改变选项“价值”，像这样：更改jQuery UI滑块值选项时动画滑块手柄？

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

滑块手柄的运动是即时的，但。我希望动画能够动画。这可以在一个较低的水平来实现，通过动画手柄的“左”的CSS属性，像这样：

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

...但如果我这样做，我只设置了CSS的左属性手柄。滑块的实际值不受影响。所以我想在动画到底哪里值设置添加一个回调，像这样的：

当我尝试以上（含回调）的代码，我得到一个jQuery错误约太多递归，所以我认为这不是完成我想要的（丑陋代码）的好方法。

有没有更好的方式来动画滑块手柄时滑块的价值改变编程？

在此先感谢！ /Thomas Kahn

来源

2010-11-08 tkahn

只需在滑块上启用animate选项即可完成此操作。从文档：

当用户单击栏杆外部手柄时是否平稳滑动手柄。还将接受表示三种预定义速度之一（“慢”，“正常”或“快”）或运行动画（例如1000）的毫秒数的字符串。

因此您的代码将是这个样子：

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

下面是这个现场演示：http://www.jsfiddle.net/VVHGx/

我想我知道自己在做什么错误 - 你需要通过.slider('value')方法而不是.slider('option', 'value）来改变滑块的值，方法：

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

来源

2010-11-08 10:48:51

我已经可以选择“动画：真正的”启用和滑块时，动画我点击滑块。但是，如果我通过更改选项以编程方式更改值，则滑块手柄的移动不是动画 - 它只是跳到新的位置。 – tkahn 2010-11-08 10:54:27

@tkahn - 他的演示通过'.slider（'value'，newValue）来改变它......' – 2010-11-08 10:57:10

啊哈！看看演示，我看到他们没有使用“选项”，他们设置新的值是这样的：$（“selector”）。slider（'value'，100）;当你使用这种语法时，它就会变成动画！感谢毅江！ – tkahn 2010-11-08 11:01:10

如果你试图用一系列滑块来做到这一点：

var slider = $("#slider").slider({ 
    animate: true, 
    range : true, 
    values: [10,40] 
}); 

$('#move').click(function(){ 
    slider.slider('values', [0,60]); 
    return false; 
});

forked fiddle

来源

2012-02-10 14:30:41

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

回答

相关问题