Question

我正在尝试在幻灯片事件中设置滑块的值。这是我的代码：

 $(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而不是马上设置？

谢谢

Answer 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海报需要{Slid}中的stop:事件而不是change:事件，以满足其他特定要求，但是当时没有看到视觉差异那是用的。

滑动后的Jquery滑块设置值

1 个答案: