移动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>