我想動畫塊的一部分,同時也添加類的李,我怎麼能做到這一點?動畫和同時添加類到李
我的小提琴 - http://jsfiddle.net/AsfFQ/4/
當我點擊「紅色」背景的股利,將動畫0像素到左。如何爲div的每動畫20px添加一個「選中」類。
我想動畫塊的一部分,同時也添加類的李,我怎麼能做到這一點?動畫和同時添加類到李
我的小提琴 - http://jsfiddle.net/AsfFQ/4/
當我點擊「紅色」背景的股利,將動畫0像素到左。如何爲div的每動畫20px添加一個「選中」類。
看看這個DEMO。
這裏是JavaScript的:
var timer,
selectLi = (function() {
var $block = $('.block'),
$container = $('.container'),
$lis = $('.container ul li'),
liWidth = $lis.width(),
$selectedLi;
return function() {
var pos = $block.offset().left - $container.offset().left,
liNum = Math.round(pos/liWidth);
$selectedLi && $selectedLi.removeClass('selected');
$selectedLi = $($lis.get(liNum));
$selectedLi.addClass('selected');
};
})();
$('.block').click(function() {
timer = setInterval(selectLi, 30);
$(this).animate({
left: 0
}, function() {
clearInterval(timer);
});
});
如果使用新的jQuery 1.8,你可以實際執行的動畫,並得到一個承諾回來,返回的對象還包含了動畫狀態,吐溫等,並且可以使用那算得了什麼元素的類申請,這是有點實驗性的,我剛開始玩這個左右,但這樣的:
$(function() {
$('.block').on('click', function(){
var ani = $.Animation(this, {left:0}, {duration: 1000});
ani.progress(function(e) {
var Now = e.tweens[0].now,
idx = Math.round(Now/10);
$(".container ul li").eq(idx).addClass('selected').siblings().removeClass('selected');
});
});
});
感謝adeno的代碼,看起來很有趣 – user1184100 2012-08-11 15:43:57
@ user1184100 - 實際上它非常棒!不僅僅是我的回答,而且他們在1.8版本中添加了一個緩存的動畫和補間動畫? – adeneo 2012-08-11 15:53:58
你是對的,但這兩個答案都很棒特別是這一個..但不得不安定下來,再次感謝代碼這很酷 – user1184100 2012-08-11 16:15:29
謝謝車廠..小提琴工作正常。 – user1184100 2012-08-11 15:42:45
太棒了!很高興工作。 – 2012-08-11 15:50:22