以编程方式设置值时的jQuery-ui滑块动画 [英] jQuery-ui slider animation when setting value programmatically

问题描述

我正在使用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滑块动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！