Перемещение jQuery Slider как div анимирует позиции

Question

Я пытаюсь создать игрока временной шкалы.

У меня есть объект div, который перемещается с одной стороны экрана на другой (то есть, используя animate(), чтобы изменить «левую» позицию div). Предположим, что эта анимация занимает 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>