2

小さな値のセットをすばやく選択するために、 jQuery-uiスライダーといくつかのボタンを使用しています。

ユーザーがこれらのボタンの1つをクリックすると、スライダーは次の.slider方法で対応する値に設定されます。

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

これは問題なく動作しますが、スライドアニメーションを見たいのですが。で試してみました

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

ただし、アニメーションは後でユーザーがスライダーバーをクリックしたときにのみ有効になるため、期待どおりに機能しません。

私が望むことを達成するためにを使用して関数を書く必要setTimeoutがありますか、それともjQueryでこれを行うためのより高いレベルの方法がありますか？

4

2 に答える 2

1

これが解決策を説明するjsfiddleです：http：//jsfiddle.net/exXLV/8/

トリックは、スライダーを作成し、そのanimateオプションをtrue、slowなどに設定することのようです。その後、スライダーの値を次のように設定する必要があります$("#slider").slider('value', 150);

.slider('value', 150)構文の使用（「value」関数）と.slider({value:myValue, animate:true})構文の使用（「option」関数）の違いに注意してください。

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

valueメソッドと一緒にanimateを使用する

このようなことをする必要があります

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

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

デモ

お役に立てれば

于 2012-05-15T20:42:15.843 に答える