来回动画范围滑块（循环）

Question

我正在尝试制作一个范围滑块的动画，该滑块在每次移动大约 2 秒的持续时间内以 1 为增量滑动到最大和向下滑动到最小值。我不希望它是瞬时的；我希望用户看到滑块来回移动。这是我当前的代码：

var slider = $("#battleslider").slider({
animate: 900
});

$('#move').click(function(){
slider.slider('value', slider.slider('value') + 500);
slider.slider('value', slider.slider('value') - 500);
});

问题是当浏览器加载并激活按钮时，滑块几乎瞬间达到最大值，然后在适当的时间内减小。我还需要幻灯片以 1 为增量进行更改，以便用户可以准确了解位置。然而，要做到这一点，我需要一个循环，这基本上会导致我的浏览器 (Chrome) 冻结。

任何替代方法或任何其他方法都会很棒！

我希望这是有道理的，如果需要更多说明，请告诉我。

提前致谢！

编辑：JSFiddle：http://jsfiddle.net/5j2f0L2t/1/

Answer 1

我建议您为此使用 css3（和 javascript/jQuery）。您可以使用 css3 animations 设置动画，其余功能可在需要时添加。

我创建了示例 here。

@keyframes slide
{
  0% { left: 10px; }
  50% { left: 160px; }
  100% { left: 10px; }
}

#slider
{
   animation-name: slide;
   animation-duration: 2s;
   animation-iteration-count: 1;
   animation-delay: 1s; 
}

来回动画范围滑块（循环）

Animating a range slider back and forth (loop)

javascript

jquery

jquery-ui

jquery-animate

range