Question

我正在使用jQuery animate（）函数来显示一个越来越大的小文本，直到它消失。

我在这里有jQuery代码：

function Gain() {
/* Using multiple unit types within one animation. */
$("#block").animate({
    width: "80%",
    opacity: 0.0,
    marginLeft: "2.6in",
    fontSize: "15em",
    borderWidth: "10px"
}, 2000, function () {
    $("#block").removeAttr("style");
    $("#block").html("");
    $("#block").css("color", "White");
    $("#block").css("position", "absolute");
    $("#block").css("z-index", "-5");

});

}

我用来触发函数的代码：

    string script = "$('#block').html('Yes!<br/>" + xpReward.ToString() + "xp!');";
    ScriptManager.RegisterStartupScript(ButtonListUpdate, typeof(string), "startup",
                                                    "xpGain(); " + script, true);

每次我在RadioButtonList（ASP.NET）中选择一个选项时都会运行此代码。

现在，我遇到了这个问题：

Chrome - 工作非常好
Safari - 工作非常好
iPhone浏览器 - 工作正常
Internet Explorer - 可怕
Firefox - 有时很棒，有时候很可怕

我想忽略Internet Explorer，但由于它们拥有非常大的市场份额，我必须处理这个问题。

您可以自己尝试动画

转到http://www.GameLearner.com
点击较大的“立即播放”按钮
点击“立即播放”
正确回答问题。第一个问题可能需要5-10秒

所以我的问题是......

如何在Internet Explorer中使用此功能？现在它太可怕了。我不指望它能够很好地工作，但只是“可玩”才真的很棒......

非常感谢！拉斯

Answer 1

只是一个想法 - 您使用%，em，px和in作为衡量单位。也许如果您只对一个测量单位进行标准化，事情可能会更快。我真的不知道，只是猜测。

同样在动画完成时运行的函数中，您可以将$（'＃block'）元素上的所有动作链接在一起，例如：

$("#block").removeAttr("style").html("").css("color", "White").css("position", "absolute").css("z-index", "-5");

Answer 2

$("#block").animate({
    width: "80%",
    opacity: 0.0,
    marginLeft: "2.6in",
    fontSize: "15em",
    borderWidth: "10px" }, 2000)
    .removeAttr("style")
    .html("")
    .css({color: '#fff', position:'absolute', z-index:'-5'});

某些oldscool浏览器的z-index在0以下有问题！

IE和Firefox中的jQuery动画非常慢

2 个答案: