动画和同时添加类到李

Question

我想动画块的一部分，同时也添加类的李，我怎么能做到这一点？

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

当我点击“红色”背景的股利，将动画0像素到左。如何为div的每动画20px添加一个“选中”类。

Answer 1

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

Answer 2

如果使用新的jQuery 1.8，你可以实际执行的动画，并得到一个承诺回来，返回的对象还包含了动画状态，吐温等，并且可以使用那算得了什么元素的类申请，这是有点实验性的，我刚开始玩这个左右，但这样的：

$(function() { 
    $('.block').on('click', function(){ 
     var ani = $.Animation(this, {left:0}, {duration: 1000}); 

     ani.progress(function(e) { 
      var Now = e.tweens[0].now, 
       idx = Math.round(Now/10); 
      $(".container ul li").eq(idx).addClass('selected').siblings().removeClass('selected'); 
     }); 
    });  
});  

FIDDLE