Question

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

我有一个div对象，它从屏幕的一侧移动到另一侧（即使用animate（）来改变div的'left'位置）。让我们假设这个动画需要5秒钟。

我希望jQuery Slider在动画旁边一点一点地增加。滑块也必须花费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。我们的想法是有一个间隔计时器，可以在播放时增加播放头，幻灯片和 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>

移动jQuery Slider作为div动画位置

2 个答案: