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>
