jQuery slideToggle "flicker" au chargement de la page

Question

Je sais qu'il y a beaucoup de questions à propos de jQuery slideToggle "scintillement" mais je n'en ai vu aucune qui aborde spécifiquement ce scintillement lors du chargement de la page.

Cliquez sur here pour l'exemple de travail.

Si vous cliquez sur Actualiser ou cliquez sur une autre page fiche technique (selon la fiche technique & section Info produit), lorsque la page se charge, le div caché « clignote » le contenu élargi puis rapidement effondrements. Je remarque cela dans Firefox, pas tellement dans IE ou Chrome. Que puis-je faire pour éviter cela? Est-ce que cela dépend de la vitesse de chargement de la page?

Veuillez également excuser le code tabulé cauchemardesque. J'ai hérité cela d'un développeur précédent. Nous prévoyons de revenir en arrière et de corriger cela dans une phase ultérieure, mais je me demande s'il y a une solution rapide à ce problème maintenant.

Merci!

Answer 1

Peut-être display:none pour des éléments comme #mover2? (bien sûr, cela signifie aussi aucune dégradation gracieuse)

EDIT (une réponse à une autre question) Pour éviter d'utiliser #id, # ID1, # ID2 dans votre css, vous pouvez simplement ajouter une classe supplémentaire à ces divs , comme hideThis. Puis, en CSS, vous pouvez simplement ajouter: .hideThis {display: none; }

Answer 2

Cela a à voir avec la latence du javascript dans Firefox sur le chargement je crois. Comme l'a suggéré Ionut Staicu, je me suis penché sur ce problème en les cachant dans le .CSS qui est probablement plus rapide que la méthode hide.

Je voudrais aussi essayer $('[id=^mover]').hide(); au lieu de tous les individuels comme $('#mover1').hide();