2

何千ものレコード（div要素）が含まれるテーブルがあります。各 div はクリック可能で、各レコードをクリックすると、クリックされた div の下に隠れている div が、slideToggle を使用して表示されます。

レコード数が非常に多いため、slideToggle の効果は望ましいものではありません。スライドするのではなく、div を表示するだけです。

次のイベントハンドラーコードがあります

$("div.opendiv").click(function(){
    var openelem = $(this).next();
    openelem.slideToggle();     
});

これらのレコードをページに分割したくありません。

slideToggle 効果がスムーズになるようにできることはありますか?

ありがとう

4

2 に答える 2

3

1つの要素を数千の間で切り替えるため、すべてのブラウザでそれを行うのに遅れが見られます。他のものよりもいくつか。これは、ブラウザとバージョンによるメモリ使用量に関連していますが、ユーザーマシンにも関連しています。明らかに、より優れたマシンはより多くのDOM要素をうまく操作できます。

そこで、私はあなたを助けるために1つの回避策でフィドルを作成しました：http：//jsfiddle.net/9vMEV/6/。

アイデアは次のとおりです。親のサイズが固定されている場合、子のスライドアニメーションは、アニメーション化される唯一の要素になるため、窒息します。そこで、height子のスライドを開始する前に、コードを更新して親を設定しましたdiv。

for制限を500から1000、10000、50000に変更します...ブラウザがこれ以上アニメーション化できない瞬間があります。そして多分ページを表示する前にクラッシュするでしょう...

私のテストでは、約3万個tdの要素があっても、アニメーションは非常にスムーズです。したがって、このアイデアは場合によっては問題を解決します。

しかし、実際には、この大きなページを多くのページに分割したくない場合は、タブなどのdivを操作して、その中に数百のtdsを表示および非表示にする方がよいと思います。ほとんどすべてのブラウザで、親の子はアニメーションdisplay: noneで処理されず、ラグが発生しません。

于 2011-03-14T15:28:53.733 に答える
1

slideToggle効果を解除する期間を設定しようとしましたか？お気に入り：

$("div.opendiv").click(function(){
    var openelem = $(this).next();
    openelem.slideToggle(1000);     
});
于 2010-02-03T11:50:52.250 に答える