动画'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();
})?;?

你可以在这里测试它们,它们的关键是.insertBefore()在动画完成后通过在回调中完成它来做.这是几个动画选项中的一个,例如你也可以在这里使用任何效果(你需要为它们包含jQuery UI).

Answer 2

尝试一下，看看是否可以编辑动画来完成您想要的操作。

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