來回動畫范圍滑塊（循環）

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 動畫設置動畫，並且可以在需要時添加其余功能。

我在這里創建了示例。

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