¿Cómo mover al primer niño al final?

Question

tengo algunos elementos div en contenedor div y quiero animarlos continuamente.

sé cómo ejecutar mi función en bucle infinito, pero hay un problema con la selección de primer div, animarlo y moverlo hasta el final después de la animación.

mi función es el siguiente:

function MoveItems() { 
     $(".container:first").animate(
      {width: "0px"}, 
      1000, 
      function(){ 
       $('.container').append($(this)); 
       $('.container').remove($(this)); 
      } 
     ); 
}; 

lo que estoy haciendo mal? ;/

edición:

tienes razón en quitar, pero la animación todavía no está funcionando.

Creo que el selector no funciona correctamente.

mi html es:

<div class="container"> 
<div class="image"><a href=""><img src="img/image001.jpg" /><span>IMAGE001</span></a></div> 
<div class="image"><a href=""><img src="img/image002.jpg" /><span>IMAGE002</span></a></div> 
<div class="image"><a href=""><img src="img/image003.jpg" /><span>IMAGE003</span></a></div> 
    <div class="image"><a href=""><img src="img/image004.jpg" /><span>IMAGE004</span></a></div> 
</div> 

pero después de ejecutar la función MoveItems una vez allí es:

<div class="container" style="width: 0px; overflow: hidden;"> 
    <div class="image"><a href=""><img src="img/image001.jpg"><span>IMAGE001</span></a></div> 
    <div class="image"><a href=""><img src="img/image002.jpg"><span>IMAGE002</span></a></div> 
    <div class="image"><a href=""><img src="img/image003.jpg"><span>IMAGE003</span></a></div> 
    <div class="image"><a href=""><img src="img/image004.jpg"><span>IMAGE004</span></a></div> 
</div> 

por lo que las funciones que actúe en .container no es un primer hijo del contenedor. ¿estoy aquí más specyfic? :)

Answer 1

$(".container:first") selecciona el primer .container que encuentra.

¿Quieres $(".container>div:first")

también puede "acelerar" la última quitar/añadir al operar en el elemento principal en lugar de hacer una nueva búsqueda DOM para .container:

var $me = $(this); 
$me.parent().append($me); 

Answer 2

quitar esta línea:

$('.container').remove($(this)); 

append() no crea una copia, se mueve los objetos seleccionados desde su posición actual hasta el final de la diana.

Answer 3

append elimina automáticamente el elemento secundario del elemento primario y lo coloca al final. remove eliminará al niño de nuevo, sin volverlo a agregar.

tan sólo reduce la línea: $('.container').remove($(this));

Answer 4

Aquí hay un ejemplo más práctico: http://jsfiddle.net/8KyCD/1/

crea un plugin de jQuery para que pueda animar los elementos de cualquier elemento. No configurarlo para que bucle, como usted ha dicho que ya sabe cómo hacerlo;)

Editar: He aquí otro ejemplo que oculta el elemento, a continuación, lo muestra, y se repite siempre: http://jsfiddle.net/8KyCD/5/(documented code)