Moving jQuery Slider as a div animates positions

Question

I am trying to create a timeline player.

I have a div object which moves from one side of the screen to another (i.e. using animate() to change the 'left' position of the div). Lets assume this animation takes 5 seconds to happen.

I would like that a jQuery Slider keeps incrementing bit by bit alongside the animation. The slider must take 5 seconds as well to reach its end to matchup up with the animation it is tracking.

Anyone got any ideas how this can be implemented?

Answer 1

Hmm. The slider has a handle (an a element) with style="left: X%;". What about animating this handle in the same speed as the other animation? Here's an example:

$('#slider').slider(); // initialize the slider
var otherElement = $('#other'), // this is your div
    handle = $('#slider').find('a'), // get the handle
    moveHandle = function(slider, percent, duration) {
        percent = typeof percent === 'string' ? percent.replace('%', '') : percent;
        slider = $(slider);
        handle = slider.find('a');
        slider.slider('disable').css('opacity', 1); // we don't want the user to move it while animating
        handle.animate({
            left: (("" + percent) + '%')
        }, duration, function() {
            slider.slider('enable');
        });
    };
moveHandle('#slider', 100, 2000);
otherElement.animate({
    left: '600px' // replace 600px with whatever you want
}, 2000);

A working demo: http://jsbin.com/iwise

It's pretty messy – but it works, and you're free to extend or modify it however you want.

Cheers.

Answer 2

I question why you want the slider to be governed by the animated object, rather than having the slider control the animation. If you let the playbar control the animation, the user can shuffle around as expected. I've put my working demo at http://jsbin.com/ijoka. The idea is there's an interval timer that increments the playhead when playing, and the slide and slidechange events trigger the animation.

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