Question

I wanted to animate a block of div and also at the same time add class to li, How can i do this?

My fiddle – http://jsfiddle.net/AsfFQ/4/

When i click the div in ‘red’ background, it will animate 0px to left. How add a class “selected” to li’s for every 20px of animation of the div.

Answer 1

Have a look at this DEMO.

Here’s the Javascript:

var timer, 
    selectLi = (function() {
        var $block = $('.block'),
            $container = $('.container'),
            $lis = $('.container ul li'),
            liWidth = $lis.width(),
            $selectedLi;

        return function() {
            var pos = $block.offset().left - $container.offset().left,
                liNum = Math.round(pos / liWidth);
            $selectedLi && $selectedLi.removeClass('selected');
            $selectedLi = $($lis.get(liNum));
            $selectedLi.addClass('selected');
        };
    })();

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