动画'insertBefore'jQuery

问题描述

是否可以将动画添加到"inserBefore"?我有一个很奇怪的业务要求，那就是在导航中有一个选项卡，该选项卡从右边的最后一个位置移动到左边的第一个位置.

Is there a way to add animation to 'inserBefore'? I have a wierd business requirement to have a tab in a navigation move from the last position on the right, to the first position on the left.

企业希望这种情况在发生时变得明显，并希望以动画方式进行显示.

The business wants it to be obvious when this happens and the want to to move across in an animated way.

因此，这是一个简化的示例:

So a simplified example is this:

说这是有问题的导航器.

Say this is the nav in question.

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

有什么方法可以使以下行为生动起来?

Any way to make the below behavior animated?

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

推荐答案

您可以这样做:

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

您可以在此处进行测试，他们的关键是要做 .insertBefore() .这是几个动画选项之一，例如，您可以使用此处的任何效果也是如此(您需要为其包含jQuery UI).

You can test it here, they key is to do the .insertBefore() after the animation completes by doing it in the callback. This one of several animation options, for example you could use any of the effects here as well (you'll need to include jQuery UI for them).

这篇关于动画'insertBefore'jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！