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

Question

我正在使用 jQuery-ui slider以及一些用于快速选择一组值的按钮。

当用户单击这些按钮之一时， slider 将通过 .slider 方法设置为相应的值:

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

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

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

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

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

Answer 1

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

技巧似乎是创建一个 slider 并将其 animate 选项设置为 true、slow 等。之后，您应该通过 $("#slider").slider('value', 150);

设置 slider 的值

请注意使用 .slider('value', 150) 语法(“value”函数)和使用 .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);
});