애니메이션에 애니메이션을 적용하고 동시에 클래스를 추가하십시오.

Question

div의 블록을 애니메이션으로 만들고 싶을뿐만 아니라 동시에 li에 클래스를 추가하고 싶습니다. 어떻게해야합니까?

내 바이올린 - 내가 '빨간색'백그라운드에서 사업부를 클릭하면 http://jsfiddle.net/AsfFQ/4/

, 그것은 왼쪽으로 0 픽셀 애니메이션을합니다. div의 애니메이션 20px마다 li에 "selected"클래스를 추가하는 방법

Answer 1

이 부분을보십시오. DEMO. 여기

는 자바 스크립트입니다 :

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