CODEWITHSUNDEEP
c#asp.netjqueryajaxinternet-explorer
Lars Holdgaard
Lars Holdgaard

Reputation: 9966

jQuery animate is very slow in both IE and Firefox

I am using a jQuery animate() function to show a small text becoming larger and larger, until it disappear.

I have the jQuery code here:

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");

});

}

The code I use to fire the function:

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

This code is run everytime I select an option in a RadioButtonList (ASP.NET).

Now, I have this issue:

I would like to ignore Internet Explorer, but as they have a very large market share, I have to deal with the issue.

You can try the animation yourself

  1. Go to http://www.GameLearner.com
  2. Click the large "Play now" button
  3. Click "Play right away"
  4. Answer a question correctly. The first question might take ~5-10s

So my question is....

How to make this work in Internet Explorer? Right now it is horrible. I don't expect it to work really good, but just "playable" would be really awesome...

Thanks a lot! Lars

Upvotes: 1

Views: 842

Answers (2)

frank
frank

Reputation: 81

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

some oldscool browsers have problems with z-index under 0!

Upvotes: 1

duncan
duncan

Reputation: 31912

Just a thought - you're using %, em, px and in as units of measurement. Perhaps if you standardised on only one measurement unit, things might work faster. I really don't know though, just having a guess.

Also in the function that runs when the animation's complete, you could chain together all the actions on the $('#block') element, e.g. 

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

Upvotes: 1

Related Questions