jQueryのだからここに問題

Question

をアニメーション化私の関数であり、

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がうまく動作しますが、私はより多くのアイテムを別のページにそれを使用する場合、それはページの右下までアニメーション化します。ここで

は、そのページのPHPです：

$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; 

あなたはより多くの情報が必要な場合は、私は事前に..あなたのためにそのPHPで

感謝をテストページを設置することができます！

PHPでテスト：http://dreamsofrenewal.us/phptest.php それはうまく動作します、それはちょうどそれ自身を複製していますか？クリックしすぎるとブラウザが遅くなってしまいます。どのようにそれをより速く動作させるためにどのようなアイデア？

私は私はしなかったとき、私は固定と言ったので、//これをリメイク：-X

Answer 1

さて、お使いのブラウザはとにかく遅れます。ラグを取り除きたい場合は、アニメーションオブジェクトをグループ化する必要があります。 Exmp：ユーザーが一度に多くのアイテムをクリックすると、それらを1つのDIV（オブジェクト）にグループ化し、オブジェクトをアニメートしますが、各アイテムはアニメーション化しません。実際には、ブラウザ上でより滑らかにアニメートする方法はありません。アイテムを移動することはできませんが、サイズを増やし、それを隠すなどの方法があります。または、少ないステップで独自のアニメーションを作成するだけです。

しかし、最高の解決策はキャンバスを使用することです。または、自分の教育用にこのゲームを作成する場合は、WebGLで作成します。

Best canvas game, tought