Moving jQuery Slider als Div animiert Positionen

Question

Ich versuche, einen Timeline-Player zu erstellen.

Ich habe ein div-Objekt, das sich von einer Seite des Bildschirms zu einem anderen bewegt (d. H. Mit animate(), um die "linke" Position des div zu ändern). Nehmen wir an, diese Animation dauert 5 Sekunden.

Ich möchte, dass ein jQuery Slider Stück für Stück neben der Animation inkrementiert. Der Schieberegler muss ebenfalls 5 Sekunden dauern, um sein Ende zu erreichen, damit er mit der Animation übereinstimmt, die er verfolgt.

Wer hat irgendwelche Ideen, wie dies umgesetzt werden kann?

Answer 1

Hmm. Der Schieberegler hat einen Griff (a Element) mit style="left: X%;".
Wie wäre es, diesen Griff in der gleichen Geschwindigkeit wie die andere Animation zu animieren? Hier ein Beispiel:

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

Eine Arbeits Demo: http://jsbin.com/iwise/36
Sie frei sind zu erweitern oder zu modifizieren, wie Sie wollen.

Answer 2

Ich Frage, warum Sie möchten, dass der Schieberegler von dem animierten Objekt gesteuert werden, anstatt den Schieberegler die Animation steuern zu lassen. Wenn Sie die Animation durch die Playbar steuern lassen, kann der Benutzer wie erwartet shuffle. Ich habe meine Arbeitsdemo unter http://jsbin.com/ijoka gestellt. Die Idee ist, dass es einen Intervall-Timer gibt, der den Abspielkopf beim Abspielen erhöht, und die Folie und Diashow-Ereignisse Ereignisse die Animation auslösen.

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