【问题标题】：jQuery UI Slider setting value with animation带有动画的 jQuery UI Slider 设置值
【发布时间】：2012-09-29 22:00:11
【问题描述】：

我正在使用 jQueryUI Slider 插件从一组值中选择一个值。

假设我有一个包含 5 个值的滑块。我想达到类似这样的效果：http://jqueryui.com/demos/slider/#hotelrooms，但我希望滑块手柄在值之间平滑移动，如果手柄在两个值之间下降，它应该捕捉到最近的

我想出了一个解决方法，但它似乎有问题。 Here's a fiddle。我将最小值设置为 1，最大值设置为 500，以在拖动时获得平滑的滑动效果，然后在停止事件时检查该值是否等于 100（只是现在，为了简单起见），如果不是，请设置将滑块的值设置为 100。一切正常，但即使我将动画值设置为 500，也没有很好的平滑滑动效果。

有没有办法用这个解决方法来完成它？还是我应该尝试别的？随意使用和更改我的 jsfiddle。任何帮助将不胜感激。

【问题讨论】：

这个动画有什么问题？我看到了平滑的滑动效果。这个滑动动画你还想要什么？
如果您拖动手柄，例如从 0 到 400，它会在没有动画的情况下回到 100。 jsfiddle.net/6Tw9U/10
这行得通吗？ jsfiddle.net/6Tw9U/13
我没有看到任何代码差异。能否请您保存您的工作，或将代码粘贴到此处？
将其添加为答案。希望对您有所帮助。

标签： jquery jquery-ui slider jquery-ui-slider

【解决方案1】：

更新

这是一个新的fiddle，它使用 steps 和 setTimeout 来使数字变化平滑。根据您的实际步骤，您必须调整 setTimeout 速度和 smoothDigitIncrease() 中增加位数的速度。

【讨论】：

相邻值之间仍然没有动画。问题是，步长值必须设置为 1，因为我需要查看值的变化。但它不能停在 100 到 200 之间。它必须捕捉到其中一个。
@user1708722 检查我的新小提琴，希望它是你需要的更多。
非常感谢，我们快到了。步长值必须设置为 1，才能在拖动时获得良好的平滑效果。那不见了。
@user1708722 我已经更新了the jsfiddle，将步长设置为 1。我调整了超时延迟，随着速度的增加，得到了更好的结果。
但我还需要句柄来捕捉定义的值。例如 100、200 等。有没有办法做到这一点？

【解决方案2】：

而不是以增量方式直接分配新值，例如

当前值=1

要设置的值 = 5

从 1 到 5 循环，而不是直接设置每个 100 或 400 毫秒的延迟

【讨论】：

谢谢，好主意，但有可能我必须循环 100 次，我担心它会杀死我的浏览器。
不，它不会杀死。看到另一个人用同样的方法发布了演示，它的工作很棒