更改 jQuery UI 滑块值选项时动画滑块句柄?

Posted

技术标签:

【中文标题】更改 jQuery UI 滑块值选项时动画滑块句柄?【英文标题】:Animating slider handle when altering the jQuery UI slider value option? 【发布时间】:2011-05-06 14:27:30 【问题描述】:

我正在使用 jQuery UI (1.8) 滑块小部件来使用户能够水平滑动/滚动一系列图标。有时我想以编程方式移动滑块,正确的方法是更改​​选项“值”,如下所示:

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

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

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

...但是如果我这样做,我只需将 CSS 的 left 属性设置为句柄。滑块的实际值不受影响。所以我想在设置值的动画末尾添加一个回调,如下所示:

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

当我尝试上面的代码(带有回调)时,我收到一个关于递归过多的 jQuery 错误,所以我认为这不是完成我想要的事情的好方法(丑陋的代码)。

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

提前致谢! /托马斯·卡恩

【问题讨论】:

【参考方案1】:

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

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

因此,您的代码将如下所示:

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

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


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

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

【讨论】:

我已经启用了“animate:true”选项,当我单击滑块时滑块会被动画化。但是,如果我通过更改选项以编程方式更改值,则滑块手柄的移动不会动画 - 它只是跳转到新位置。 啊哈!查看演示,我发现他们没有使用“选项”,他们正在设置这样的新值: $("selector").slider('value', 100);当您使用该语法时,它会动画!谢谢蒋毅!【参考方案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 滑块值选项时动画滑块句柄?的主要内容,如果未能解决你的问题,请参考以下文章

JQuery UI 范围滑块值

使用带有 Fontawesome 的 jQuery UI 滑块更改星级

单击滑块轨道时获取 Jquery-UI 滑块值?

如何更改 Jquery UI 滑块句柄

滑块动画时更新标签上的滑块值

使用带有 jquery ui 滑块的淘汰赛 js