移動jQuery滑塊作爲一個div動畫位置

Question

我想創建一個時間軸播放器。

我有一個div對象，從屏幕的一側移動到另一側（即使用animate（）更改div的「左」位置）。讓我們假設這個動畫需要5秒鐘發生。

我想要一個jQuery滑塊不斷增加一點一點的動畫旁邊。滑塊也需要5秒鐘才能結束，以便跟蹤它正在跟蹤的動畫。

任何人有任何想法如何實現？

Answer 1

嗯。滑塊有一個手柄（a元素），其中style="left: X%;"。
如何以與其他動畫相同的速度對此句柄進行動畫處理？這裏有一個例子：

var $slider = $('#slider').slider(); // initialize the slider 
var $handle = $slider.find('a'); // get the UI handle 
var $other = $('#other'); 

function moveHandle(perc, duration) { 
    $slider.slider('disable').css('opacity', 1); // we don't want the user to 
               // move it while animating 
    $handle.animate({ 
    left: perc + '%' 
    }, duration, function() { 
    $slider.slider('enable'); 
    }); 
} 
moveHandle(100, 2000); 

$other.animate({ 
    left: 300 // replace 300px with whatever you want 
}, 2000); 

一個工作演示：http://jsbin.com/iwise/36
你可以自由地擴展或修改你想要的東西。

Answer 2

我問你爲什麼要讓滑塊被動畫對象控制，而不是讓滑塊控制動畫。如果您讓播放欄控制動畫，則用戶可以按照預期隨機播放。我已將我的工作演示放在http://jsbin.com/ijoka。這個想法是有一個間隔計時器，在播放時增加播放頭，並且事件觸發動畫。

<script type="text/javascript"> 
     var playing = false; 
     var interval; 
     var i = 0; 

     $(function() { 
       $('#slider').slider({min: 0, max: 100}); 
       $('#slider').bind('slide', function(e, ui) { i = ui.value; a(ui.value);}).bind('slidechange', function(e, ui) { a(ui.value);}); 

     }); 

     function a(p) { 
     $('#box').css('left', p + "%"); 
     } 

     function play() { 
      if(playing) { 
       playing = false; 
       clearInterval(interval); 
      } else { 
       i = $('#slider').slider('value'); 
       playing = true; 
       interval = setInterval(step, 100); 
      } 
     } 

     function step() { 
      i = i + 2; 
      $('#slider').slider('value', i); 
     } 
    </script>