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

我正在使用一个jQuery-ui 滑块 http://jqueryui.com/demos/slider/以及一些用于快速选择一组值的按钮。

当用户单击这些按钮之一时，滑块将通过.slider method:

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

这工作正常，但我想看看滑动动画。我尝试过

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

但它没有按预期工作，因为只有当用户稍后单击滑块时才会启用动画。

我应该使用编写一个函数吗setTimeout来实现我想要的，或者有没有更高级别的方法来使用 jQuery 来实现这一点？

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

技巧似乎是创建一个滑块并设置它的animate选项true, slow，ETC。之后你应该通过设置滑块的值$("#slider").slider('value', 150);

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

HTML:

<h1>HTML Slider Test</h1>

<div id="slider"></div>

<p>Your slider has a value of <span id="slider-value"></span></p>

<button type="button">Set to 150</button>

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);
});