I have a list and would like to move the item to the top when it's clicked on. Simultaneously, all other items should move down to make space.

That's what I have so far:

```
<ul id="list">
  <li id="one">item-1</li>
  <li id="two">item-2</li>
  <li id="three">item-3</li>
  <li id="four">item-4</li>
</ul>

```

//

```
  $('li').on('click', function () {
    $(this).css({ position : 'absolute', top : $(this).position().top });
    var height = $(this).parent().children().first().height();
    var list = $(this).parent();
    $(this).animate({top: '0px'}, { duration: 500, queue: false });

    list.children().each(function( index, element) {
    var $liElement = $(element);
    if($liElement != $(this))
    {
        $liElement.animate({top: height + 'px'}, { duration: 500, queue: false });     
    }
  });
});

```

Here is the link: <http://jsfiddle.net/5qgnjvdp/>

I see the item moving on top but all others don't move at all. What is wrong here?
Should I use `prepend()` to insert the list item on top when the animation is finished?