title: Can't get this JQuery animate to work
body: <p>On my site there are two bags with div ids "cloud" and "cloud2", and they are inside a div "sky"</p>
  
  <p>The JQuery script below is supposed to move the bags/clouds to the right, but I can`t get it to work. </p>
  
  <p>Can you please tell me what I`m doing wrong?</p>
  
  <p>I`m a bit of a newbie, so please keep that in mind when answering. Thanks for your help</p>
  
  <pre><code>&lt;script&gt;
      var cloudMoved = false;
      var cloud2Moved = false;
  
      $(init);
  
      function init()
      {
          cloudMove();
          cloud2Move();
          }
  
      function cloudMove()
      {
          if (!cloudMoved)
          {
              $("#cloud")
                  .css("left", $("#cloud").offset().left)
          }
  
          $("#cloud")
              .animate(
                  {
                      left: $("#sky").width()
                  },
                  cloudMoved ? 180000 : 150000,
                  "linear",
                  function()
                  {
                      $(this)
                          .css("left", -parseInt($(this).css("width")))
                      cloudMoved = true;
                      cloudMove();
                  }
              )
      }
  
      function cloud2Move()
      {
          if (!cloud2Moved)
          {
              $("#cloud2")
                  .css("left", $("#cloud2").offset().left)
          }
          $("#cloud2")
              .animate(
                  {
                      left: $("#sky").width()
                  },
                  cloud2Moved ? 120000 : 60000,
                  "linear",
                  function()
                  {
                      $(this)
                          .css("left", -parseInt($(this).css("width")))
                      cloud2Moved = true;
                      cloud2Move();
                  }
              )
      }
  
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.custom #sky
  {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 131px;
      overflow: hidden;
  }  
  
  
  .custom #cloud
  {
      position: absolute;
      left: 5%;
      top: 15px;
      z-index: 2;
      width: 120px;
      height: 91px;
          background-repeat: no-repeat;
  }
  
  .custom #cloud2
  {
      position: absolute;
      left: 25%;
          z-index: 3;
          top: 65px;
      width: 101px;
      height: 66px;
          background-repeat: no-repeat;
  }
  </code></pre>