javascript - 使用 setInterval 的动画问题

Question

我通过单击红色的 div 将 div 向左移动 0px 动画。在 div 下方，随着 div 的移动，类被添加到 li 中，但类只添加到某些 li 而不是全部。

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

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

下面是问题的图片

Answer 1

试试这个jsFiddle 示例。

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 示例

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 时，请参阅另一个小提琴：

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();

玩得开心！