问题描述
我正在使用jQuery-ui滑块和一些按钮可以快速选择一些值.
I'm using a jQuery-ui slider and some buttons for a quick selection of a little set of values.
当用户单击以下按钮之一时,可通过.slider
方法将滑块设置为相应的值:
When the user clicks one of these buttons, the slider is set to the corresponding value through the .slider
method:
$("#mySlider").slider("value", myValue);
这很好,但是我想看滑动动画.我尝试过
This works fine, but I'd like to see the sliding animation. I tried with
$("#mySlider").slider({value:myValue, animate:true})
但是它不能按预期工作,因为动画仅在以后用户单击滑块时才启用.
but it doesn't work as expected, since the animation is only enabled when, later, the user clicks on the slider bar.
我应该使用setTimeout
编写一个函数来实现我想要的功能还是使用jQuery来实现这一目标的更高级方法?
Should I write a function using setTimeout
to achieve what I want or is there a higher-level way to do this with jQuery?
推荐答案
这是一个展示解决方案的jsfiddle: http ://jsfiddle.net/exXLV/8/
Here is a jsfiddle illustrating a solution: http://jsfiddle.net/exXLV/8/
技巧似乎是创建一个滑块并将其animate
选项设置为true
,slow
等.然后您应该通过$("#slider").slider('value', 150);
The Trick seems to be to create a slider and set it's animate
option to true
, slow
,etc. and after that you should set the value of the slider via $("#slider").slider('value', 150);
请注意,使用.slider('value', 150)
语法(值"功能)与使用.slider({value:myValue, animate:true})
语法(选项"功能)之间的区别.
Notice the difference between using the .slider('value', 150)
syntax ("the value" function) and using the .slider({value:myValue, animate:true})
syntax ("the option" function).
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);
});
这篇关于以编程方式设置值时的jQuery-ui滑块动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!