CODEWITHSUNDEEP
jquery
Robert
Robert

Reputation: 111

animate 'insertBefore' jquery

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

Upvotes: 11

Views: 11940

Answers (2)

Capt Otis
Capt Otis

Reputation: 1260

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

Upvotes: 4

Nick Craver
Nick Craver

Reputation: 630549

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

Upvotes: 17

Related Questions