jquery动画在ie8中冻结答案

【问题标题】：Jquery animations freeze in ie8jquery动画在ie8中冻结
【发布时间】：2011-04-11 11:44:58
【问题描述】：

我有一些 JQueryUI 动画以及一些向页面添加一些 html 的 Jquery 代码。 html 是根据来自 JQuery Ajax 调用的数据生成的。

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

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

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

有人有解决办法吗？

【问题讨论】：

我应该限定我所说的冻结的意思，它暂时冻结，然后完成隐藏。在滑动中的某个任意点，动画将冻结一秒钟，然后 div 的剩余部分将隐藏而没有动画，然后第二个刚刚填充 html 的 div 将毫无问题地向下滑动。所以我很清楚，加载第二个 div 会干扰第二个 div 的动画。

标签： jquery jquery-ui internet-explorer-8

【解决方案1】：

此article 可以为您提供帮助。

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 属性。结果是，当您按下启动长时间运行方法的按钮时，图像将显示并继续动画，直到回发返回并重新加载页面，然后图像消失 - 这正是我们想要的行为。

【讨论】：

这很有趣，但就我而言，我没有图像。我有一些冻结的 JqueryUI 动画。就像我使用 .slidUp 一样，div 会向上滑动，冻结，然后完成隐藏。我认为冻结是由于链接问题中建议的向页面添加了一些 html。你知道我该如何解决这个问题吗？
@kralco626 如果幻灯片跳动，请查看jqueryfordesigners.com/slidedown-animation-jump-revisited
@redsquare - 我可能是错的，但似乎那篇文章中讨论的跳跃问题是动画本身的问题，换句话说，它发生在仅使用动画时，即使没有别的发生在页面上。情况并非如此，如果动画是唯一发生的事情，那么就没有问题。只有当我也在执行动画时，执行 ajax 调用并随后生成 html 并将其添加到页面中。
@kralco626 - 您可以尝试在 jsfiddle.net 上复制您的问题吗？如果没有示例，很难确切地看到你的意思，因此上面的猜测！请记住，javascript 仍然是单线程的，因此任何繁重的操作（创建和触发 xhr）都会导致其他正在运行的 js 出现延迟——尤其是使用 ie 较慢的 js 引擎。
@redsquare - 我会尝试在 jfiddle 上获取 eamil，但不确定到底是什么问题，很难知道我必须在 jsfiddle 上放什么代码才能复制它。我确实做了很多 $("#something").html(一些相当大的 html 字符串) 所以也许就像我发布的问题所说的那样，它与它忙于添加新的 html 而不能做同时动画。这不会发生在 firefox 或 chrome 上，所以我可能会告诉我的客户，如果他们不喜欢这个故障，他们可以让公司让他们使用一个好的浏览器而不是 ie8 的废话

【解决方案2】：

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

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

当然我想还有第四个解决方案，就是处理它。

【讨论】：