slideToggle problème dans jQuery

Question

J'ai une table dans laquelle il y aura des milliers d'enregistrements (éléments div). Chaque div est capable de cliquer et quand je clique sur chaque enregistrement, un div qui est caché sous le div cliqué sera montré en utilisant slideToggle.

Étant donné que le nombre d'enregistrements est très élevé, l'effet de slideToggle n'est pas celui souhaité. Il montre juste le div au lieu de glisser.

J'ai le code de gestionnaire d'événement suivant

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

Je ne veux pas diviser ces documents en pages.

Y at-il quelque chose que je peux faire pour que l'effet slideToggle soit lisse?

Merci

Answer 1

Avez-vous essayé définir une durée de de slideToggle efect? aime:

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

Answer 2

Puisque vous est affin un élément entre des milliers, tous les navigateurs montreront lag pour le faire. Certains plus que d'autres. Ceci est lié à l'utilisation de la mémoire par le navigateur et la version, mais aussi à la machine de l'utilisateur. Évidemment, de meilleures machines peuvent bien manipuler plus d'éléments DOM.

Donc, j'ai créé un Fiddle avec une solution de contournement pour vous aider: http://jsfiddle.net/9vMEV/6/.

L'idée est: si la taille des parents est fixe, l'animation de glissement de l'enfant sera étouffer, car il sera le seul élément étant animé. Donc, j'ai mis à jour votre code pour définir le parent height avant de commencer à faire glisser l'enfant div.

Modifiez la limite for de 500 à 1000, 10000, 50000 ... Votre navigateur ne pourra pas animer plus longtemps. Et peut-être va planter avant de montrer n'importe quelle page ...

Dans mes tests, l'animation est bien lisse même avec environ 30 000 éléments td. Donc, cette idée résoudrait votre problème dans certains cas.

Mais je pense que la meilleure option si vous ne voulez pas diviser cette grande page en plusieurs pages est: travailler avec des divs comme les onglets, en montrant et en cachant quelques centaines de tds à l'intérieur. Sur presque tous les navigateurs enfants d'un parent avec display: none ne sont pas gérés sur les animations et ne causera pas de retards.