平滑移动到单击元素

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。