Hesitation en animation avec jQuery slideToggle

Question

J'essaye de faire un simple jQuery slideToggle() sur un DIV contenant du texte et j'ai trouvé l'animation très lente (semble hésiter) car l'animation slideDown s'approche du bas du DIV coulissant.

Le code et l'exemple de ceci peuvent être trouvés here. J'ai testé sur plusieurs ordinateurs et toutes les versions modernes des navigateurs populaires, tous se comportent de la même manière. Curieusement, quand je cours exactement la même page dans jsFiddle, il est lisse.

Des idées?

MISE À JOUR

Une partie de cela semble être, comme quelqu'un d'autre a suggéré que jQuery ne connaît pas la hauteur de la DIV glisser avant que l'animation fonctionne. Puisque le contenu de la DIV coulissante sera dynamique et soit très court soit assez long, moi non plus. Donc, j'ai essayé de saisir la hauteur de la DIV avant de la cacher avec jQuery et ensuite de définir la hauteur CSS en conséquence. Conçu pour une animation un peu plus lisse, mais sans doute pas la meilleure solution - demo

MISE À JOUR 2

Il semblerait que le problème était dû à plusieurs problèmes CSS avec l'exemple initial. D'abord, beaucoup trop de DIVs. Deuxièmement, le DIV coulissant avait jeu de remplissage - ne joue pas bien avec toggleSlide, et enfin, la DIV coulissante était dans un conteneur DIV qui contenait également le DIV (bouton) #control-container.

Réduire les DIV à deux (DIV extérieure pour l'élément coulissant et le DIV coulissant lui-même) et ne pas régler le rembourrage DIV coulissant extérieur semblait faire l'affaire - final example.

Answer 1

Blatant Karmaw * * * g juste au cas où je suis sur la bonne voie;)

---

Je suis sur mon iPhone en ce moment je ne peux pas vérifier mon hypothèse - mais je ont déjà rencontré des problèmes similaires lors de l'animation d'éléments avec les propriétés padding et/ou margin et height:auto. JQuery semble avoir du mal à déterminer la hauteur réelle avant d'animer dans ces circonstances. Essayez d'envelopper votre contenu réel dans un conteneur div et/ou lui donner une hauteur fixe pour voir si l'animation se déroule bien alors.

---

Edit 1:

Une autre solution Je me souviens à l'aide:

• Ne cachez pas l'élément via CSS
• Sur domready, déterminer la taille de l'élément via jQuery et l'affecter à l'élément via data(), puis définissez l'élément height sur 0 et overflow:hidden
• Au lieu de slideToggle(), utilisez animate() avec la hauteur précédemment enregistrée.

Fugly, mais fait l'affaire.

---

Edit 2:

Une question connexe (et une solution de contournement) are described here

---

Edit 3:

Est-ce que this fiddle travail pour vous, par hasard ? Ajout d'un conteneur avec remplissage - excusez le mauvais formatage, jsfiddle n'est pas amusant sur l'iPhone.

Answer 2

Le plugin jQuery Easing peut vous aider.