Swapping <div> in a continous JQuery loop
<p>I am working on having a single div animate right to left through the header. Once the div goes off screen and finishes animation I would like to loop the animation but swap the div for another containing a new image. The code is below but not functioning properly. Any help would be greatly appreciated.</p>

<pre><code>    $(document).ready(function() {
       var clouds = $('#bg_header .cloud');
       var lng = clouds.length;
    $('.cloud').eq(0).animate({
        right: '+=1400'
        }, 50000, 'linear', anim(1));
          function anim(i) {
          if (i &gt;= lng) {
          i = 0;
     }
    $('.cloud').eq(i).animate({
        right: '+=1400'
        }, 50000, 'linear', anim(i+1));
  }
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;div id="bg_header"&gt;
&lt;div id="clouds" class="cloud" style="right:-400px;"&gt;&lt;img border="0" alt="animated clouds" src="/images/clouds.png" /&gt;&lt;/div&gt;
&lt;div id="clouds2" class="cloud" style="right:-400px;"&gt;&lt;img border="0" alt="animated clouds" src="/images/clouds2.png" /&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#bg_header{
min-width:990px;
padding-left:105px;
padding-right:105px;
right:0;
left:0;
height:330px;
position:fixed;
background:url("/images/bg_header.png") repeat-x top center;
z-index:1000;
clear:both;
margin-left:auto;
margin-right:auto;
}


#clouds{
position:absolute;
z-index:500;
right:0px;
top:10px;
}


#clouds2{
position:absolute;
z-index:500;
right:0px;
top:10px;
}
</code></pre>
