jQuery clean SlideToggle 同时适用于许多元素

Question

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

有谁知道如何加快速度？另外，我正在切换 msg_head 中的图标，但这并没有减慢速度。如果我删除 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 也效果很好。我真的只是想看看是否有一种方法可以让幻灯片切换动画不显得卡住。

Answer 1

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

Answer 2

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