javascript - 如何用动画将列表项移动到顶部？

Question

我有一个列表，希望在单击该项目时将其移至顶部。同时，所有其他项目应向下移动以腾出空间。

这就是我到目前为止所拥有的:

<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 });     
    }
  });
});

这是链接:http://jsfiddle.net/5qgnjvdp/

我看到该项目在顶部移动，但其他所有项目根本没有移动。这里有什么问题吗？当动画完成时，我应该使用 prepend() 在顶部插入列表项吗？

Answer 1

虽然不是真正的“动画”，但我不久前正在沿着类似的思路做一些事情。我最终使用的是 slideUp，然后是 slideDown 来提供动画感，而无需将实际动画连接到移动。

$('li').click(function() {
        $(this).slideToggle(500, function() {
        $(this).prependTo('#list').slideToggle(500); });
    });

li { list-style: none; background: #ddd;padding: 5px 10px; border: 1px solid #aaa; margin: 10px; text-transform: uppercase; font-weight: bold;color:#fff; }
#list { margin:20px; padding:0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul id="list" data-role="listview">
    <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').click(function() {
        $(this).slideToggle(500, function() {
        $(this).prependTo('#list').slideToggle(500); });
    });

fiddle update

我再次意识到，这并不是真正超越幻灯片切换的动画，但它传达了一种类似于动画的交互感。