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。：当用户同时点击许多项目时，您将它们分组为一个DIV（对象）和动画对象，但不是每个项目。实际上没有办法让它在浏览器上更加流畅。还有另一个解决方案，你不能移动项目，但增加大小，然后隐藏它或类似的东西。或者只用较少的步骤制作自己的动画。

但最好的解决方案是使用画布，或者如果您为自己的教育制作此游戏，请使用WebGL制作。

Best canvas game, tought

jQuery动画问题

1 个答案: