我想創建一個時間軸播放器。移動jQuery滑塊作爲一個div動畫位置
我有一個div對象,從屏幕的一側移動到另一側(即使用animate()更改div的「左」位置)。讓我們假設這個動畫需要5秒鐘發生。
我想要一個jQuery滑塊不斷增加一點一點的動畫旁邊。滑塊也需要5秒鐘才能結束,以便跟蹤它正在跟蹤的動畫。
任何人有任何想法如何實現?
我想創建一個時間軸播放器。移動jQuery滑塊作爲一個div動畫位置
我有一個div對象,從屏幕的一側移動到另一側(即使用animate()更改div的「左」位置)。讓我們假設這個動畫需要5秒鐘發生。
我想要一個jQuery滑塊不斷增加一點一點的動畫旁邊。滑塊也需要5秒鐘才能結束,以便跟蹤它正在跟蹤的動畫。
任何人有任何想法如何實現?
嗯。滑塊有一個手柄(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>
cbeer,你是對的。我最終的目標是讓滑塊「控制」動畫,因此我的上述簡化問題。 現在如您的示例所示,並且正如我在考慮類似解決方案時所懷疑的,該動畫非常生澀。我知道這可以通過一個較小的遞增值來排序,但是這會像jQuery.animate()一樣順暢嗎? – Hady 2009-04-19 11:27:43