Jquery animations freeze in ie8

Question

I have some JQueryUI animation coupled with some Jquery code that addes some html to the page. The html is generated based on data from a JQuery Ajax call.

I thought the freezing of my animations might be from the Ajax call, but from what the question below is saying i'm thinking not:

Why does my spinner GIF stop while jQuery ajax call is running?

I think the issue I am having may be of the same origin, however the question above provides a REASON for the behavior, not a SOLUTION.

Does anyone have a solution?

Answer 1

So I think that there are 3 main "solutions" to this problem; well they are more workarounds.

1. You can remove the hide animation. Use just .hide() and then use some animation on the show.
2. You can use the callback method of the hideing animation to then insert the html and show the new div
3. You can use a different browser. I have only tested on ie8/firefox/chrome; but I would in this case have to suggest chrome as it's ability to do this beautifuly is amazing. While I would normally also suggest firefox, however in this case it's handeling of this sitution is no better than ie8's.

And of course I guess there is a fourth solution, which is to just deal with it.

Answer 2

This article could be of assistance for you.

The key part of the HTML elements is as follows:

<span id='myHiddenDiv' style='display: none'>
  <img src='' id='myAnimatedImage' align='absmiddle'>
</span>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="showDiv();" Text="Search" />

We have a hidden span (it could be a div, if you want it on a new line), and inside this span is our img tag. Next, in the OnClientClick handler of our button, we call the "showDiv();" client script function which looks like so:

<script language='javascript'> 
  function showDiv() 
  {
    document.getElementById('myHiddenDiv').style.display =""; 
    setTimeout('document.images["myAnimatedImage"].src="work.gif"', 200); 
  } 
</script>

This uses the setTimeout method to make the DOM reset the src property of the image after 200ms. The result is that when you press your button that kicks off your long - running method, the image will show and continue animating until the postback returns and the page is reloaded, whereupon the image disappears -- exactly the behavior we want.