Question

我正在使用jQuery UI（1.8）滑块小部件来让用户水平滑动/滚动一系列图标。有时我想以编程方式移动滑块，正确的方法是更改选项“value”，如下所示：

$("#content-slider").slider("option", "value", 37);

滑块手柄的动作是即时的。我希望动画能够动画。这可以通过动画句柄的“左”CSS属性在较低级别完成，如下所示：

$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450);

...但如果我这样做，我只需为句柄设置CSS的左属性。滑块的实际值不受影响。所以我想在动画结尾处添加一个回调函数，其中设置了值，如下所示：

$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450, function() {
    // Callback - set the new slider value
    $("#content-slider").slider("option", "value", position);
});

当我尝试上面的代码（使用回调）时，我得到一个关于过多递归的jQuery错误，所以我认为这不是一个完成我想要的好方法（丑陋的代码）。

当以编程方式更改滑块的值时，是否有更好的方法为滑块手柄设置动画？

提前致谢！ / Thomas Kahn

Answer 1

您只需启用滑块上的animate选项即可完成此操作。来自文档：

当用户点击栏上的外部手柄时是否平滑滑动手柄。还将接受表示三种预定义速度之一（“慢”，“正常”或“快速”）的字符串或运行动画的毫秒数（例如1000）。

因此，您的代码将如下所示：

$("#content-slider").slider({
    animate: true
});

这是一个现场演示：http://www.jsfiddle.net/VVHGx/

我想我知道你做错了什么 - 你需要通过.slider('value')方法而不是.slider('option', 'value）`方法来改变滑块的值：

$('#content-slider').slider('value', 42);

Answer 2

如果您尝试使用范围滑块执行此操作：

var slider = $("#slider").slider({
    animate: true,
    range : true,
    values: [10,40]
});

$('#move').click(function(){
    slider.slider('values', [0,60]);
    return false;
});

forked fiddle

更改jQuery UI滑块值选项时动画滑块手柄？

2 个答案: