animate 'insertBefore' jquery

Question

Gibt es eine Möglichkeit, "inserBefore" eine Animation hinzuzufügen? Ich habe eine merkwürdige geschäftliche Anforderung, eine Registerkarte in einer Navigation von der letzten Position auf der rechten Seite zur ersten Position auf der linken Seite zu bewegen.

Das Unternehmen möchte, dass es offensichtlich ist, wenn dies geschieht, und dass es sich auf eine lebendige Art und Weise bewegt.

Ein vereinfachtes Beispiel ist also dieses:

Nehmen wir an, es handelt sich um das betreffende Schiff.

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

Gibt es eine Möglichkeit, das folgende Verhalten zu animieren?

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

Answer 1

Sie können das so machen:

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

Sie können es hier testen ist es wichtig, dass sie die .insertBefore() nachdem die Animation abgeschlossen ist, indem Sie dies im Callback tun. Dieser von mehrere Animationsoptionen, zum Beispiel können Sie einer der Effekte hier sowie (Sie müssen jQuery UI für sie enthalten).

Answer 2

Versuchen Sie, ob Sie die Animation so bearbeiten können, dass sie Ihren Wünschen entspricht.

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