Question

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

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

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

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

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

但它无法按预期工作，因为动画仅在用户点击滑块时才会启用。

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

Answer 1

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

诀窍似乎是创建一个滑块并将其animate选项设置为true，slow等。然后你应该通过$("#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);
});

Answer 2

使用animate和value方法

这样的事情应该做

var slider = $(".slider").slider({
    value: 50,
    animate: true
});

$('#animate').click(function(){
    slider.slider('value', //required value);
});

DEMO

希望这有帮助

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

2 个答案: