jquery - 平滑移动到单击的元素

Question

如何使用 jquery移动div（#line）到单击区域（ ）？li

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

小提琴

$('.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 在这里。