動畫和同時添加類到李

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