title: How to move first child to the end?
body: <p>i have some div items in div container and i want to animate them continously.</p>
  
  <p>i know how to run my function in endless loop, but there is a problem with selecting first div, animate it and move it to the end after done animation.</p>
  
  <p>my function looks like this:</p>
  
  <pre><code>function MoveItems() {
          $(".container:first").animate(
              {width: "0px"},
              1000,
              function (){ 
                  $('.container').append($(this));
                  $('.container').remove($(this));
              }
          );
  };
  </code></pre>
  
  <p>what i'm doing wrong? ;/</p>
  
  <p><strong>edit:</strong></p>
  
  <p>You are right about remove, but the animation still is not working.</p>
  
  <p>i think that selector is not working corectly.</p>
  
  <p>my html is:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="img/image001.jpg" /&gt;&lt;span&gt;IMAGE001&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="img/image002.jpg" /&gt;&lt;span&gt;IMAGE002&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="img/image003.jpg" /&gt;&lt;span&gt;IMAGE003&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="img/image004.jpg" /&gt;&lt;span&gt;IMAGE004&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but after running function MoveItems once there is:</p>
  
  <pre><code>&lt;div class="container" style="width: 0px; overflow: hidden;"&gt;
      &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="img/image001.jpg"&gt;&lt;span&gt;IMAGE001&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="img/image002.jpg"&gt;&lt;span&gt;IMAGE002&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="img/image003.jpg"&gt;&lt;span&gt;IMAGE003&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="img/image004.jpg"&gt;&lt;span&gt;IMAGE004&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so the functions is operating on .container not a first child of container. am i here more specific? :)</p>