jQuery clean slideToggle一次为许多元素答案

【问题标题】：jQuery clean slideToggle for many elements at oncejQuery clean slideToggle一次为许多元素
【发布时间】：2011-01-17 21:06:10
【问题描述】：

我正在使用 slideToggle 技术在我的应用程序中显示和隐藏 100 多个充满信息的 DIV。我有“全部显示”和“全部隐藏”按钮，我希望他们也有 slideToggle 动画（而不是只显示和隐藏所有）。但是在 IE6 上，slideToggle 在应用于每个元素时运行速度非常慢。

有谁知道如何加快速度？另外，我正在切换 msg_head 中的图标，但这并没有减慢它的速度。如果我删除 th slideToggle 并将其替换为仅显示/隐藏（在显示全部/全部隐藏时）它表现良好。但是，如果可能的话，我希望有动画。

<p class="msg_head" onclick="toggleSelection($(this));">Heading</p>
<div class="msg_body">
   content
</div>

还有我的全部显示和隐藏所有功能...

function toggleSelection(element) {
    element.next("msg_body").slideToggle(250);
    element.find(":first-child").toggleClass("ui-icon-circle-arrow-s");
    element.find(":first-child").toggleClass("ui-icon-circle-arrow-e");
}

function showall() {
    $(".msg_head").each(function() {
      $(this).next(".msg_body:hidden").slideToggle(250);
      $(this).find(":first-child").attr('class','ui-icon ui-icon-circle-arrow-s');
    });
}

function hideall() {
    $(".msg_head").each(function() {
      $(this).next(".msg_body:visible").slideToggle(250);
      $(this).find(":first-child").attr('class','ui-icon ui-icon-circle-arrow-e');
    });
}

作为记录，单独的 toggleSection() 函数执行完美。并且将 showall 和 hideall 函数中的 slideToggle 替换为 show 和 hide 效果也很好。我真的只是想看看是否有办法让 slideToggle 动画看起来不窒息。

【问题讨论】：

标签： jquery internet-explorer-6 performance each slidetoggle

【解决方案1】：

您使用的是什么版本的 jQuery？如果您没有使用最新的 (1.4.1)，那么我强烈建议您升级。 jQuery 的开发人员对最新版本进行了重大的性能检查，以解决您在上面描述的问题。以下是发行说明的链接以获取更多信息：http://jquery14.com/day-01/jquery-14

【讨论】：

【解决方案2】：

这不会有太大帮助，但我将不得不在这里简单地说“不”。同时为 100 多个 DIV 设置动画似乎有点多，但是当访问者在一台体面的机器上运行现代浏览器时，您也许可以摆脱它。但是，如果您希望专门在 IE6 中加快速度……您无能为力。浏览器很古老，包括 javascript 渲染引擎，永远无法在看起来流畅漂亮的同时做你想做的事情。

【讨论】：

是的，我不得不同意。我放弃了这个。