fiddle update

Question

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/

我看到物品在顶部移动但其他所有物品都没有移动。这有什么不对？动画完成后，我应该使用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

同样，我意识到这不是幻灯片切换之外的动画，但它传达了一种类似于动画的交互感。

Answer 2

您的脚本存在一些问题。

比较$liElement != $(this)时，this引用当前列表子项的每个函数的范围，element与li相同。将单击的$(...)存储在循环函数之外的变量中并与之进行比较。也无需比较element != clickedLi个对象。 li就足够了。
当您为其他position: absolute元素设置动画时，它们没有li（或相对），因此您将看不到它们的移动。
如果您为其他li元素分配绝对位置，则将所有元素移动到相同位置，即列表中的第二行。您可以使用相对位置来移动它们。您应该确保在点击top的原始位置后排除之后的元素。

动画完成后，您应该将列表项作为列表的第一个子项插入，然后删除绝对/相对定位，包括Only a type can be imported. com.cloudbees.plugins.credentials.impl.UsernamePasswordCredentialsImpl resolves to a package样式，以确保它第二次运行（并确保可见表示与元素的结构一致。

How do I animate moving an </li></a> <li> <a> item to the top?

2 个答案:

fiddle update