以编程方式设置值时的jQuery-ui滑块动画

我正在使用jQuery-ui滑块和一些按钮来快速选择一组值。

当用户单击其中一个按钮时，滑块将通过.slider方法设置为相应的值：

 $("#mySlider").slider("value", myValue); 

这很好用，但我想看看滑动动画。 我试过了

 $("#mySlider").slider({value:myValue, animate:true}) 

但它不能按预期工作，因为动画仅在用户点击滑块栏后启用。

我应该使用setTimeout编写一个函数来实现我想要的function，还是有更高级别的方法来使用jQuery？

Answer 1

这是一个说明解决方案的jsfiddle： http ： //jsfiddle.net/exXLV/8/

Trick似乎是创建一个滑块并将它的animate选项animate为true ， slow等。 之后你应该通过$("#slider").slider('value', 150);

注意使用.slider('value', 150)语法（“value”函数）和使用.slider({value:myValue, animate:true})语法（“选项”函数）之间的.slider({value:myValue, animate:true}) 。

HTML：

 
HTML Slider Test
 
 
Your slider has a value of 
 Set to 150 

JS：

 $("#slider").slider( { value:100, min: 0, max: 500, step: 1, animate: "slow", slide: function( event, ui ) { $( "#slider-value" ).html( ui.value ); } } ); $( "#slider-value" ).html( $('#slider').slider('value') ); $("button").click( function(){ $("#slider").slider('value', 150); }); 

Answer 2

使用animate和value方法

这样的事情应该做

 var slider = $(".slider").slider({ value: 50, animate: true }); $('#animate').click(function(){ slider.slider('value', //required value); }); 

DEMO

希望这可以帮助