title: jQuery image animation loop
body: <p>Sorry but I am a big rookie with codes, and I am trying to figure out how to loop the clouds move horizontally at random intervals in the sky. 
  Here is a link: <a href="https://dl.dropbox.com/u/34829763/americasrole/index.html" rel="nofollow">https://dl.dropbox.com/u/34829763/americasrole/index.html</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;What's America's role in our world?&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script src="jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="background"&gt;
          &lt;img class= "cloud" id="cloud1" src="cloud1.png"/&gt;
          &lt;img class= "cloud" id="cloud2" src="cloud1.png"/&gt;
          &lt;img class= "cloud" id="cloud3" src="cloud1.png"/&gt;
          &lt;img class= "cloud" id="cloud4" src="cloud1.png"/&gt;
      &lt;/div&gt;
      &lt;div id="foreground"&gt;
          &lt;img id="fg" src="foreground.png"/&gt;
      &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
      var delay = 2000;
      var $cloud = $('.cloud');
      var numRand = Math.floor(Math.random()*2000)+9000;
      function runIt() {
          $cloud.animate({
              left: "+1100",
          }, numRand, function() {
              $cloud.removeAttr("style");
              runIt();
          });
      }
  
      runIt();
  });
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#background{
      background: url("background.png");
      width:1024px;
      height:768px;
  }
  
  #foreground{
      position: absolute;
      top:10px;
      left:10px;
      width:1024px;
      height:768px;
      z-index: 1000;
  }
  
  #fg{
      z-index: 10000;
  }
  
  #cloud1{
      position: absolute;
      left: 100px;
      top:10px;
  
  }
  #cloud2{
      position: absolute;
      left: 10px;
      top:150px;
      width:170px;
      height:99px;
  }
  #cloud3{
      position: absolute;
      left: -150px;
      top:250px;
  }
  
  #cloud4{
      position: absolute;
      left: 400px;
      top:100px;
      width:170px;
      height:99px;
  }
  </code></pre>
  
  <p>Thanks a lot.</p>