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