a jQuery image-group animation

I've got a div with three same images.

<div>
    <img class="movlights" src="files/images/movelights.png" alt="10 years logo" />
    <img class="movlights sec" src="files/images/movelights.png" alt="10 years logo" />
    <img class="movlights third" src="files/images/movelights.png" alt="10 yearslogo"/>
</div>

Each has different "absolute" position in a way that all f开发者_如何学Goorm a row and their parent div is overflowed - hidden.

So I animate them moving together simultaneously as a group from left to right with this code:

  $(function(){ 
    movelights();
  });

  function movelights(){
    for(x=0;x<3;x++)
    {
       $('div img:eq('+x+')').animate({left: (1400 - x*800)},24000);
    }
  };

My problem is: How to return an image on a certain starting position before the others by queuing it again when it passes the div's right edge so that the animated pattern repeats itself!

So I'm interested in both:

• how to queue image from end of the line to beginning
• how to loop the animated pattern

Hope I was clear enough English isn't my native language.

Here's some additional code:

div{
width:1000px;
overflow:hidden;
position:relative;
}

all img{  
  display:block;  
  position:absolute;
  left:120px;  
}
img2{  
  left:-678px;
}
img3{  
  left:-1400px;
}

I had the same problem. Try using timer = setTimeout(functionname to loop, 0);.

Whenever I ask a jQuery question someone usually responds with a link to some bloated plugin someone else built. The question was how to do something not where to download something.