jQuery animate очень медленно работает как в IE, так и в Firefox.

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, но, поскольку у них очень большая доля рынка, я долженразобраться с проблемой.

Вы можете попробовать анимацию самостоятельно

1. Перейти к http://www.GameLearner.com
2. Нажмите большую кнопку "Играть сейчас"кнопка
3. Нажмите «Играть сразу»
4. Правильно ответьте на вопрос.Первый вопрос может занять ~ 5-10 с

Итак, мой вопрос ...

Как заставить это работать в Internet Explorer?Прямо сейчас это ужасно.Я не ожидаю, что это будет работать действительно хорошо, но просто "играбельно" было бы действительно здорово ...

Спасибо большое!Lars

Answer 1

$("#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'});

в некоторых старых браузерах возникают проблемы с z-index ниже 0!

Answer 2

Просто мысль - вы используете %, em, px и in в качестве единиц измерения.Возможно, если вы стандартизируете только одну единицу измерения, все может работать быстрее.Я действительно не знаю, хотя, просто догадываясь.

Также в функции, которая запускается, когда анимация завершена, вы можете связать воедино все действия с элементом $ ('# block'), например

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