Question

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

有谁知道如何提高速度？此外，我正在切换msg_head中的图标，但这并没有减慢速度。如果我删除了slideToggle并将其替换为只显示/隐藏（在show all / hide all），它就可以正常运行。但是如果可能的话我想要动画。

<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（）函数执行完美。使用show和hide替换showall和hideall函数中的slideToggle也很有效。我真的只是看看是否有办法获得slideToggle动画而不会让它看起来很窒息。

Answer 1

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

Answer 2

这不会有太多帮助，但我将不得不在这里使用简单的“否”。同时动画100+ DIV似乎有点多，但是当访问者在一台体面的机器上运行现代浏览器时，你可能能够逃脱它。但是如果你想在IE6中专门加快速度......你可以做的并不多。浏览器很古老，包括javascript渲染引擎，在看起来光滑漂亮的情况下永远无法做到你想要的东西。

jQuery clean slideToggle一次为多个元素

2 个答案: