Javascript 设置动画并同时向li添加类
我想制作一个div块的动画,同时给li添加类,我该怎么做 我的小提琴- 当我单击“红色”背景中的div时,它将向左设置0px的动画。如何为li的每20像素的动画添加一个类“selected”。看看这个 下面是Javascript:Javascript 设置动画并同时向li添加类,javascript,jquery,Javascript,Jquery,我想制作一个div块的动画,同时给li添加类,我该怎么做 我的小提琴- 当我单击“红色”背景中的div时,它将向左设置0px的动画。如何为li的每20像素的动画添加一个类“selected”。看看这个 下面是Javascript: var timer, selectLi = (function() { var $block = $('.block'), $container = $('.container'), $lis
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,您实际上可以执行一个动画并得到一个承诺,返回的对象还包含动画状态,tween等,您可以使用它来计算将类应用到哪个元素,这是一种实验性的,我刚刚开始玩这个,但类似于:
$(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');
});
});
});
@user1184100-实际上它非常棒!不仅仅是我的答案,还有他们在1.8版中添加了一个与tweening不同的动画这一事实?你是对的,但两个答案都很棒,特别是这一个…但不得不安定下来,再来一个,再次感谢代码这很酷