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はこちら。