javascript - 将 jQuery Slider 作为 div 动画位置移动

Question

我正在尝试创建一个时间线播放器。

我有一个 div 对象，它从屏幕的一侧移动到另一侧(即使用 animate() 更改 div 的“左侧”位置)。假设这个动画需要 5 秒才能发生。

我希望 jQuery Slider 能够随着动画一起一点一点地递增。 slider 也必须花费 5 秒才能到达终点，以与其正在跟踪的动画相匹配。

有人知道如何实现这一点吗？

Answer 1

嗯。 slider 有一个带有 style="left: X%;" 的句柄(a 元素)。
如果以与其他动画相同的速度来设置此 handle 的动画效果如何？这是一个例子:

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
您可以随意扩展或修改它。