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

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; 
}