使用setInterval的动画问题

Question

I'm animating a div to left by 0px by clicking on the div colored in red. Below the div , classes are added to li's as the div moves along, but the classes gets added to only certain li's and not all.

Is there any other logic to fix this ?

Fiddle - http://jsfiddle.net/AsfFQ/16/

Below is the image of the issue

Answer 1

Try this 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');
});​

This sets the eligible list items and then as the bar moves, compares their position to tjat of the bar and if they're in range, they get the class added.

Answer 2

Your little animation needs only a little code. See 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();
​

I'm using this plugin jquery-timing .

---

This also works when animating 100px on each click, see 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();

Have fun!