a jQuery image-group animation
<p>I've got a div with three same images.</p>

<pre><code>&lt;div&gt;
    &lt;img class="movlights" src="files/images/movelights.png" alt="10 years logo" /&gt;
    &lt;img class="movlights sec" src="files/images/movelights.png" alt="10 years logo" /&gt;
    &lt;img class="movlights third" src="files/images/movelights.png" alt="10 yearslogo"/&gt;
&lt;/div&gt;
</code></pre>

<p>Each has different "absolute" position in a way that all form a row and their parent div is
overflowed - hidden.</p>

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

<pre><code>  $(function(){ 
    movelights();
  });

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

<p>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!</p>

<p>So I'm interested in both:</p>

<ul>
<li>how to queue image from end of the
line to beginning</li>
<li>how to loop the animated pattern</li>
</ul>

<p>Hope I was clear enough English isn't my native language.</p>

<p>Here's some additional code:</p>

<pre><code>div{
width:1000px;
overflow:hidden;
position:relative;
}

all img{  
  display:block;  
  position:absolute;
  left:120px;  
}
img2{  
  left:-678px;
}
img3{  
  left:-1400px;
}
</code></pre>
