Вопрос

Я использую технику Slidetoggle, чтобы показать и скрывать 100+ DIV, полные информации в моем приложении. У меня есть кнопки «Показать все» и «скрыть все», и я бы хотел, чтобы они также имели анимацию Slidetoggle (вместо того, чтобы просто показывать и скрывать все). Однако на 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');
    });
}

Для записи функция Thogglesection () работает безупречно. И замена Slidetoggle в функциях Showall и Hideall на Show и Hide тоже работает хорошо. Я действительно просто вижу, есть ли способ получить анимацию Slidetoggle, не выглядя задохнувшейся.

Это было полезно?

Решение

Это не будет большой помощью, но мне придется пойти с простой "нет" здесь. Одновременно анимировать 100+ DIV кажется немного большим, но вы, возможно, сможете сойти с рук, когда посетитель управляет современным браузером на приличной машине. Но если вы хотите ускорить это специально в IE6 ... вы мало что можете сделать. Браузер древний, включая двигатель рендеринга JavaScript, и никогда не сможет делать то, что вы хотите, выглядя гладким и красивым.

Другие советы

Какую версию jQuery вы используете? Если вы не используете последние (1.4.1), я настоятельно рекомендую обновить. Разработчики JQUERY провели капитальный ремонт для последней версии для решения таких проблем, как то, что вы описываете выше. Вот ссылка на заметки о выпуске для получения дополнительной информации: http://jquery14.com/day-01/jquery-14

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top