animate 'insertBefore' jquery

Question

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

Answer 1

You can do it like this:

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

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).

Answer 2

Try this, see if you can edit the animation to do what you want.

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