移动 jQuery Slider 作为 div 动画位置

Question

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

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

我希望 jQuery 滑块在动画旁边一点一点地递增。滑块也必须花费 5 秒才能到达其末端以匹配它正在跟踪的动画。

有人知道如何实现吗？

Answer 1

嗯。滑块有一个带有style="left: X%;" 的句柄（a 元素）。
以与其他动画相同的速度动画这个手柄怎么样？这是一个例子：

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。这个想法是有一个间隔计时器，在播放时增加播放头，slide 和 slidechange 事件触发动画。

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