클릭 한 요소로 부드럽게 이동

Question

jquery를 사용하여 클릭 한 영역 (li)에 div (#line)을 이동시키는 방법은 무엇입니까?

HTML 메뉴 : 내가 원하는 (하지만 지금은 지정된 거리 만 이동) 무엇을

<div class="floor-switch" id="floors"> 
    <div class="arrw-up"></div> 
    <div id='line'></div> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
    </ul> 
    <div class="arrw-down"></div> 
</div>​ 

예 : http://jsfiddle.net/js6CM/

Answer 1

Fiddle

$('.floor-switch li').click(function() { 
    $('#line').animate({ 
     top: $(this).position().top 
    }); 
});​ 

Answer 2

내가이 무엇이라고 생각 원하는 :

$('.floor-switch li').click(function() { 
    var clickedElement = this; 
    var line = $('#line')[0]; 
    var movement = clickedElement.offsetTop - line.offsetTop; 

    $('#line').animate({ 
     left: 0, 
     top: line.offsetTop + movement 
    }); 
});​ 

클릭 한 요소가 clickedElement이고 빨간색 줄이 line입니다. 그런 다음 나는 완료된 movement을 계산하고 마침내 그 움직임을 빨간색 선에 추가합니다.

도움이 되었기를 바랍니다.

감사합니다.

편집 :

jsFiddle here.