How to move first child to the end?

Question

i have some div items in div container and i want to animate them continously.

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.

my function looks like this:

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

what i'm doing wrong? ;/

edit:

You are right about remove, but the animation still is not working.

i think that selector is not working corectly.

my html is:

<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>

but after running function MoveItems once there is:

<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>

so the functions is operating on .container not a first child of container. am i here more specific? :)

Answer 1

$(".container:first") selects the first .container it finds.

You want $(".container>div:first")

You can also "speed up" the final remove/append by operating on parent instead of doing another DOM search for .container:

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

Answer 2

append automatically removes the child from the parent and places it at the end. remove will remove the child again, without adding it back on.

just drop the line: $('.container').remove($(this));

Answer 3

remove this line:

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

append() doesn't create a copy, it moves the selected objects from their current position to the end of the target.

Answer 4

Here's a more practical example: http://jsfiddle.net/8KyCD/1/

It creates a jQuery plugin so that you can animate the items on any element. I didn't set it up to loop, as you said you already know how to do that ;)

Edit: here's another example that hides the element, then shows it, and repeats forever: http://jsfiddle.net/8KyCD/5/ (documented code)