divとして移動するjQuery Sliderは位置をアニメーションします

Question

タイムラインプレーヤを作成しようとしています。

私は、画面の片側から別の側に移動するdivオブジェクトを持っています（つまり、アニメーション（）を使ってdivの「左」の位置を変更しています）。このアニメーションは5秒かかると仮定します。

jQuery Sliderは、アニメーションとともにビット単位でインクリメントしていきたいと思います。スライダは、追跡しているアニメーションとマッチアップするために、その終わりに達するまで5秒かかる必要があります。

これはどのように実装できますか？

Answer 1

Hmm。スライダーにはハンドル（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に入れました。再生時に再生ヘッドをインクリメントするインターバルタイマーがあり、スライドとスライド変更イベントがアニメーションをトリガーします。

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