javascript - 动画并同时将类添加到li

我想为一个div块制作动画，并同时将类添加到li中，我该怎么做？

我的小提琴-http://jsfiddle.net/AsfFQ/4/

当我在“红色”背景中单击div时，它将向左动画0px。如何为div的每20px动画在li's中添加一个“ selected”类。

最佳答案

看看这个DEMO。

这是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);
    });
});

关于javascript - 动画并同时将类添加到li，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11915867/