How to move first child to the end?
<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 specyfic? :)</p>
