jQuery Clean Slidetoggle для многих элементов одновременно
-
21-09-2019 - |
Вопрос
Я использую технику 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