平滑移動到單擊元素

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 
    }); 
});​ 

Im獲取clickedElement中的單擊元素和line中的紅線。然後我計算已完成的movement並最終將該運動添加到紅線。

我希望它有幫助！

問候。

編輯：

jsFiddle here。