jQuery动画问题

Question

So here are my functions,

function getOffset(el){
    var _x = 0;
    var _y = 0;

    while ( el && !isNaN( el.offsetLeft ) && !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");
        });
    });
}

http://dreamsofrenewal.us/jquery.html works just fine, but when I use it on another page with more items, it animates down to the bottom right of the page.

Here's the PHP for that page:

$id = 0;
$c = "<div id='dialog' style='display:none;'></div><table width='95%' class='ti' cellpadding='4' cellspacing='1' style='margin:10px;margin-left:auto;margin-right:auto;'>";
$sql = mysql_query("SELECT * FROM `received` WHERE `uid` = '".$this->uid."'");
while ($row = mysql_fetch_array($sql)) {
    $c .= "<tr><td>";
    for ($x = 0; $x < $row["amount"]; $x++) {
        $i = $id++;
        $c .= "<img style='position:absolute;' src='images/crops/" . $this->uI("itembase", $row["thing"], "sprite") . "' border='0' alt='image' id='" . $i . "' onclick='makeSeeds(" . $i . ");' />";
    }
    $c .= "</td></tr>";
}
$c .= "</table>";
$finalid = $id;
$c .= "<script type='text/javascript'>
$(document).ready(function(){
    var ids='";
    for ($x = 0; $x < $finalid; $x++){
        $c .= "#" . $x . ",";
    }
    $c .= "';
    $(ids).click(function(){makeSeeds(this.id);});
});
</script>";

$sql2 = mysql_query("SELECT * FROM `bought` WHERE `uid` = '".$this->uid."'");

while ($row2 = mysql_fetch_array($sql2)) {
    if ($this->uI("itembase",$row2["itemid"],"type") == "crops") {
        $c .= "<img src='images/crops/" . $this->uI("itembase", $row["itemid"], "sprite") . "' border='0' alt='image' id='".$row["itemid"]."' />";
    }
}

for ($x=0; $x < $finalid; $x++){
    $c .= "<img src='images/seeds/turnip.png' id='" . $x . "seeds' style='display:none; position:absolute; left:10px;' border='0' alt='seeds' />";
}

$c .= "<img src='images/makers/seed.png' alt='seedmaker' id='seedmakerx' style='position:absolute; left:10px;' /></div>";

return $c;

If you need more info, I can put up a test page with that PHP for you..

Thanks in advance!

Test with PHP: http://dreamsofrenewal.us/phptest.php 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?

//remade this because I said I fixed when I didn't :-X

Answer 1

Well, your browser will lag anyway. If you want to get rid of lag, you have to group animating objects. Exmp.: When at one time user clicks many items, you group them into one DIV(object), and animate object, but not each item. There is actualy no way to animate it smoother over browsers. There is another solution, that you can not move item, but increse size, and then hide it or something like that. Or just make your own animation with less steps.

But the BEST solution is to use canvas, or if you making this game for your own education, make it with WebGL.

Best canvas game, tought