Перемещение jQuery Slider в качестве 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. Идея в том, что есть интервальный таймер, который увеличивает точку воспроизведения при воспроизведении, а события 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>