2

スライドイベントでスライダーの値を設定しようとしています。これが私のコードです：

 $(document).ready(function () {
            $("#slider").slider({

                min: 0,
                max: 10000,
                step: 1, // Use this determine the amount of each interval
                values: [0], // The default range
                slide: function (event, ui) {
                    var slider = $("#slider").slider({
                        animate: true
                    });
                    slider.slider('value', 500);
                }
            });
        });

私は何が欠けていますか？スライダーの値をアニメーション化して設定できないようです。

編集：スライダーの値を設定できるようになりましたが、速度が速すぎます。設定した値にゆっくりと行きたいです。編集したコードは次のとおりです。

$(document).ready(function () {
            $("#slider").slider({

                min: 0,
                max: 10000,
                animate: "slow",
                step: 1,// Use this determine the amount of each interval
               // values: [0] // The default range
               change: function (event, ui) {
                   $("#slider").slider('value', 500);
                }
            });
        });

すぐに設定するのではなく、ゆっくりと500に移動するにはどうすればよいですか?

ありがとうございました

4

1 に答える 1

1

参考：

jsフィドル

スライダー ボタンを動かして離すと、スライダー ボタンはアニメーションでロックされた値に戻ります。

コード：

$(document).ready(function() {

    $('#slider').slider({
        min: 0,
        max: 10000,
        // Values "fast", "normal", "slow", or duration can be used.
        animate: 1500,
        step: 1,
        // Starting value is 500
        value: 500,
        animate: true,
        change: function(){
           // This setTimeout will allow the slider to animated correctly.
           setTimeout("$('#slider').slider('value', 500);", 350);
        }
    });

    // On page load, animate the slider to this value of 500.
    $('#slider').slider('value', 500);

});

ステータスの更新: SO ポスターでは、他の特定の要件のために UI スライダーstop:のイベントではなくイベントが必要でしchange:たが、それを使用しても視覚的な違いは見られません。

于 2012-07-12T09:05:57.367 に答える