jQuery animate Problems
<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>
