jQueryは、多くの要素を一度にクリーンスライドトーグルします
-
21-09-2019 - |
質問
私は、アプリケーションで情報でいっぱいの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');
});
}
レコードの場合、個々のトグレクション()関数は完璧に実行されます。ショーロールとHideall機能のSlidetoggleをShow and Hideに置き換えることもうまく機能します。窒息させずにスライドトーグルアニメーションを取得する方法があるかどうかを本当に見ています。
解決
これはあまり助けにはなりませんが、ここでは簡単な「いいえ」と一緒に行かなければなりません。同時に100+ Divをアニメーション化することは少し大きいようですが、訪問者がまともなマシンで最新のブラウザを実行しているときに逃げることができるかもしれません。しかし、IE6でこれを具体的にスピードアップしようとしている場合は、できることはあまりありません。ブラウザは、JavaScriptレンダリングエンジンを含む古代であり、スムーズできれいに見える間、あなたが望んでいることをすることは決してできません。
他のヒント
どのバージョンのjQueryを使用していますか?最新(1.4.1)を使用していない場合は、アップグレードを強くお勧めします。 jQueryの開発者は、上記のような問題に対処するために、最新バージョンの主要なパフォーマンスオーバーホールを行いました。詳細については、リリースノートへのリンクを次に示します。 http://jquery14.com/day-01/jquery-14