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.