Question

How to make a move div (#line) to the clicked area (li) using jquery?

HTML menu:

<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>​

Example of what I want (but now it moves only to the specified distance): http://jsfiddle.net/js6CM/

Answer 1

Fiddle

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