动画'insertBefore'jquery

Question

有没有办法为'inserBefore'添加动画？我有一个奇怪的业务要求，导航中的标签从右边的最后一个位置移动到左边的第一个位置。

当这种情况发生并希望以动画方式移动时，企业希望它变得明显。

这是一个简单的例子：

说这是导航问题。

<ul id="test">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>LAST Item</li>
 </ul> 

是否可以将以下行为设为动画？

$("li:last").insertBefore("li:first");

Answer 1

你可以这样做：

$("li:last").slideUp(function() {
  $(this).insertBefore("li:first").slideDown();
})​;​

You can test it here，他们的关键是在动画完成后通过在回调中完成.insertBefore()。这是几个动画选项中的一个，例如你也可以使用any of the effects here（你需要为它们包含jQuery UI）。

Answer 2

试试这个，看看你是否可以编辑动画来做你想做的事。

$('li:last')
    .animate({height:'toggle'},200)
    .insertBefore('li:first')
    .animate({height:'toggle'},200);