Jquery 动画在 ie8 中冻结

Question

我有一些 JQueryUI 动画和一些 Jquery 代码，这些代码向页面添加了一些 html。 html 是根据 JQuery Ajax 调用的数据生成的。

我认为我的动画冻结可能来自 Ajax 调用，但从下面的问题来看，我认为不是：

为什么我的旋转器 GIF 在 jQuery ajax 调用运行时停止？

我认为我遇到的问题可能是同一原因，但是上面的问题提供了该行为的原因，而不是解决方案。

有人有解决办法吗？

Answer 1

这篇文章 可能对您有帮助。

HTML元素的关键部分如下：

<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" />

我们有一个隐藏的跨度（它可以是一个 div，如果你想将它放在一个新行上），这个跨度内是我们的 img 标签。接下来，在按钮的 OnClientClick 处理程序中，我们调用“showDiv();”客户端脚本函数如下所示：

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

这里使用setTimeout方法让DOM在200ms后重置图像的src属性。结果是，当您按下启动长时间运行的方法的按钮时，图像将显示并继续动画，直到回发返回并重新加载页面，然后图像消失 - 这正是我们想要的行为。

Answer 2

所以我认为这个问题有3个主要的“解决方案”；好吧，它们是更多的解决方法。

1. 您可以删除隐藏动画。仅使用 .hide()，然后在节目中使用一些动画。
2. 您可以使用隐藏动画的回调方法，然后插入html并显示新的div
3. 您可以使用不同的浏览器。我只在ie8/firefox/chrome上测试过；但在这种情况下，我不得不建议使用 chrome，因为它能够做到这一点，而且非常漂亮。虽然我通常也会建议使用 Firefox，但在这种情况下，它对这种情况的处理并不比 ie8 好。

当然，我想还有第四种解决方案，那就是直接处理它。