将jQuery滑块移动为div,以设置位置动画

嗯,滑块有一个手柄( 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
您可以随意扩展或修改它。

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>