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

参考：

jsFiddle

移动滑块按钮并释放它后，滑块按钮将动画回锁定值。

代码：

$(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 海报需要stop:事件而不是change:UI 滑块中的事件，但在使用时没有看到视觉差异。

于 2012-07-12T09:05:57.367 回答