Javascript 来回设置范围滑块的动画（循环）

我正在尝试设置一个范围滑块的动画，该滑块在每次移动大约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:

我建议您使用css3（和javascript/jQuery）来实现这一点。可以使用css3设置动画，其他功能可以在需要时添加

我创建了一个例子

---

可以创建stacksnippets，JSFIDLE来演示吗？对不起，我花了一点时间：谢谢你的代码和示例！有了这段代码，我还能够得到滑块在某个时刻的精确值，而不仅仅是它的目标。看起来是这样的，但我只是想确定一下。没问题，请查看所有的文档以了解更多信息。对不起，我想在那里打个问号。我的意思是，在某一时刻，你能得到滑块的精确值吗？再次感谢。是的，我很高兴。通过使用“offsetLeft”属性，您可以随时获取坐标，单击红色按钮使其移动。

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