动画并同时向 li 添加类答案

【问题标题】：Animate and simultaneously add class to li动画并同时向 li 添加类
【发布时间】：2012-08-08 14:15:30
【问题描述】：

我想为一个 div 块设置动画，同时给 li 添加类，我该怎么做？

当我单击“红色”背景中的 div 时，它会向左移动 0px。如何为 div 的每 20px 动画添加一个“选定”类。

【问题讨论】：

【解决方案1】：

如果使用新的 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');
        });
    });    
});

FIDDLE

【讨论】：

@user1184100 - 实际上它非常棒！不仅仅是我的回答，而是他们在 1.8 中添加了带有补间的延迟动画？
你是对的，但两个答案都很棒，特别是这个..但不得不安顿下来另一个，再次感谢代码，这很酷

【解决方案2】：

看看这个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);
    });
});

【讨论】：