animado 'insertBefore' jquery

Question

¿Hay alguna forma de agregar animación a 'inserBefore'? Tengo un requisito de negocio extraño tener una pestaña en un movimiento de navegación desde la última posición a la derecha, hasta la primera posición a la izquierda.

El negocio quiere que sea obvio cuando esto sucede y desea moverse de una manera animada.

Así, un ejemplo simplificado es la siguiente:

que este es el NAV en cuestión.

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

¿Alguna manera de animar el siguiente comportamiento?

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

Answer 1

Pruebe esto, vea si puede editar la animación para hacer lo que quiera.

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

Answer 2

Puede hacerlo de esta manera:

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

You can test it here La clave, es hacer la .insertBefore() después de la animación completa haciéndolo de la devolución de llamada. Esta de varias opciones de animación, por ejemplo, también puede usar any of the effects here (deberá incluir jQuery UI para ellas).