title: jQuery animate Problems
body: <p>So here are my functions, </p>
  
  <pre><code>function getOffset(el){
      var _x = 0;
      var _y = 0;
  
      while ( el &amp;&amp; !isNaN( el.offsetLeft ) &amp;&amp; !isNaN( el.offsetTop ) ) {
          _x += el.offsetLeft - el.scrollLeft;
          _y += el.offsetTop - el.scrollTop;
          el = el.offsetParent;
      }
  
      return { top: _y, left: _x };
  }
  
  function makeSeeds(id){
      var seedmaker = getOffset(document.getElementById('seedmaker'));    
  
      $("#"+id).animate({
          "left":seedmaker.left
      }, 2000, function(){
          $("#"+id).animate({
              "top":seedmaker.top
          }, 1000, function() {
              $(this).hide("explode",{pieces:52},1000);
              $("#"+id+"seeds").animate({
                  "opacity":"toggle",
                  "top":"+=10px",
                  "left":"+=30px"
              }, 1000);
  
              $("#dialog").html("Successfully created one "+id+" seed!");
              $("#dialog").dialog();
              $("#"+id+"seeds").hide("slow");
          });
      });
  }
  </code></pre>
  
  <p><a href="http://dreamsofrenewal.us/jquery.html" rel="nofollow">http://dreamsofrenewal.us/jquery.html</a> works just fine, but when I use it on another page with more items, it animates down to the bottom right of the page.</p>
  
  <p>Here's the PHP for that page:</p>
  
  <pre><code>$id = 0;
  $c = "&lt;div id='dialog' style='display:none;'&gt;&lt;/div&gt;&lt;table width='95%' class='ti' cellpadding='4' cellspacing='1' style='margin:10px;margin-left:auto;margin-right:auto;'&gt;";
  $sql = mysql_query("SELECT * FROM `received` WHERE `uid` = '".$this-&gt;uid."'");
  while ($row = mysql_fetch_array($sql)) {
      $c .= "&lt;tr&gt;&lt;td&gt;";
      for ($x = 0; $x &lt; $row["amount"]; $x++) {
          $i = $id++;
          $c .= "&lt;img style='position:absolute;' src='images/crops/" . $this-&gt;uI("itembase", $row["thing"], "sprite") . "' border='0' alt='image' id='" . $i . "' onclick='makeSeeds(" . $i . ");' /&gt;";
      }
      $c .= "&lt;/td&gt;&lt;/tr&gt;";
  }
  $c .= "&lt;/table&gt;";
  $finalid = $id;
  $c .= "&lt;script type='text/javascript'&gt;
  $(document).ready(function(){
      var ids='";
      for ($x = 0; $x &lt; $finalid; $x++){
          $c .= "#" . $x . ",";
      }
      $c .= "';
      $(ids).click(function(){makeSeeds(this.id);});
  });
  &lt;/script&gt;";
  
  $sql2 = mysql_query("SELECT * FROM `bought` WHERE `uid` = '".$this-&gt;uid."'");
  
  while ($row2 = mysql_fetch_array($sql2)) {
      if ($this-&gt;uI("itembase",$row2["itemid"],"type") == "crops") {
          $c .= "&lt;img src='images/crops/" . $this-&gt;uI("itembase", $row["itemid"], "sprite") . "' border='0' alt='image' id='".$row["itemid"]."' /&gt;";
      }
  }
  
  for ($x=0; $x &lt; $finalid; $x++){
      $c .= "&lt;img src='images/seeds/turnip.png' id='" . $x . "seeds' style='display:none; position:absolute; left:10px;' border='0' alt='seeds' /&gt;";
  }
  
  $c .= "&lt;img src='images/makers/seed.png' alt='seedmaker' id='seedmakerx' style='position:absolute; left:10px;' /&gt;&lt;/div&gt;";
  
  return $c;
  </code></pre>
  
  <p>If you need more info, I can put up a test page with that PHP for you..</p>
  
  <p>Thanks in advance!</p>
  
  <p>Test with PHP: <a href="http://dreamsofrenewal.us/phptest.php" rel="nofollow">http://dreamsofrenewal.us/phptest.php</a>
  It works fine, it's just duplicating itself? And if you click too many in a row, it lags browser really bad? Any idea how to make it work faster?</p>
  
  <p>//remade this because I said I fixed when I didn't :-X</p>