2

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

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

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

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

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

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

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

4

2 回答 2

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);
});
于 2012-05-15T20:41:48.527 回答
0

使用动画和值方法

这样的事情应该做

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

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

演示

希望这可以帮助

于 2012-05-15T20:42:15.843 回答