javascript - setIntervalを使用したアニメーションの問題

Question

赤で色付けされたdivをクリックして、左に0pxのdivをアニメーション化しています。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();

楽しむ！