使用setInterval的动画问题

Question

我通过点击红色的div来动画一个div向左移动0px。在div下面，当div移动时，类被添加到li中，但是类只被添加到某些li而不是全部。

还有其他逻辑可以解决这个问题吗？

小提琴 - http://jsfiddle.net/AsfFQ/16/

以下是问题的图片

Answer 1

试试 jsFiddle example 。

var pos;
var timer, selectLi = (function() {
    var $block = $('.block'),
        $container = $('.container'),
        $lis = $('.container ul li'),
        liWidth = $lis.width(),
        $selectedLi;
    return function() {
        pos = $block.offset().left - $container.offset().left;
        liNum = Math.round(pos / liWidth);
        // $selectedLi && $selectedLi.removeClass('selected');
        $selectedLi = $($lis.get(liNum));
        $('li.eligible').each(function() {
            if ($block.offset().left-3 <= $(this).offset().left) $(this).addClass('selected');
        });
    };
})();

$('.block').click(function() {
    timer = setInterval(selectLi, 30);
    $(this).animate({
        left: 0
    }, function() {
        clearInterval(timer);
    });
});

$('li').each(function() {
    $(this).addClass('eligible');
    if ($(this).offset().left > $('.block').offset().left) $(this).removeClass('eligible');
});​

设置符合条件的列表项，然后当栏移动时，将它们的位置与栏的tjat进行比较，如果它们在范围内，则会添加该类。

Answer 2

你的小动画只需要一点代码。 见jsfiddle example

var $block = $('.block'),
    start = $block.offset().left;

$block.one('click').animate({left: 0})
 .$('li').filter(function(){return $(this).offset().left<=start})
 .repeat(30).filter(function(){return $(this).offset().left>=$block.offset().left})
 .addClass('selected').unrepeat();
​

我正在使用此插件jquery-timing。

---

这在每次点击动画100px时也有效，请参阅another fiddle：

var $block = $('.block');
$block.on('click').animate({left: '-=100px'})
 .$('li').filter(function(){return $(this).offset().left<=$block.offset().left})
 .repeat(30).filter(function(){return $(this).offset().left>=$block.offset().left})
 .addClass('selected').unrepeat();

玩得开心！