animer 'insertBefore' jquery

Est-il un moyen d'ajouter de l'animation à "inserBefore'? J'ai une bizarre exigence de l'entreprise d'avoir un onglet dans la barre de navigation se déplacer à partir de la dernière position sur la droite, à la première position sur la gauche.

L'entreprise veut qu'il soit évident lorsque cela se produit et l'envie de se déplacer à travers un film d'animation.

Donc un exemple simplifié est-ce:

Dire que c'est la valeur liquidative du fonds en 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>

Toute façon de faire de la ci-dessous le comportement d'animation?

$("li:last").insertBefore("li:first");
Pouvez-vous montrer le css pour l'ul? Juste pour rendre le test plus facile.

OriginalL'auteur Robert | 2010-07-15

  1. 17

    Vous pouvez le faire comme ceci:

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

    Vous pouvez le tester ici, ils est de faire le .insertBefore() après l'animation est terminée par le faire dans le rappel. De cette de plusieurs options d'animation, par exemple, vous pouvez utiliser l'un des effets ici comme bien (vous aurez besoin d'inclure jQuery UI pour eux).

    super simple et facile à modifier une fois que vous voyez cela. Merci!

    OriginalL'auteur

  2. 4

    Essayer, voir si vous pouvez modifier l'animation à faire ce que vous voulez.

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

    OriginalL'auteur