jQuery UI accordéon Jumpy lorsqu'il est ouvert

Question

J'ai un widget accordéon sur ma page qui se développe passé où il devrait s'arrêter lors de l'animation ouverte (revenir à la bonne taille à la fin de l'animation), et s'accroche à cette même taille étendue quand il commence à animer fermé. Dans mon cas, le contenu de l'accordéon devrait augmenter à 150px, mais je l'ai regardé s'animer dans la fenêtre Inspect Element de Chrome et l'avoir vu passer à 185px brièvement.

J'ai vu d'autres suggérer que le remplissage et/ou les marges peuvent tromper jQuery quand il fait un calcul de taille en changeant la section d'accordéon à position: absolute brièvement pour faire le calcul.

http://jsfiddle.net/shadowycore/T5fnZ/1/

Toute aide à tous serait grandement apprécié.

Answer 1

Cela ressemble à un bug. Le même effet est en exemple jQueryUI AIP:

http://api.jqueryui.com/accordion/#entry-examples

Answer 2

J'ai eu le même problème et après quelques heures j'ai finalement réussi à le corriger en ajoutant le CSS suivant:

.ui-accordion .ui-accordion-content{ 
     box-sizing:content-box;    
     -moz-box-sizing:content-box; 
} 

J'espère cela aide

Answer 3

Débordement: auto est la CLE !! Si vous vérifiez l'exemple de l'accordéon de jquery, vous remarquerez que le leur ne saute pas et je trouve que c'est à cause du débordement: style automatique sur la classe .ui-accordéon-content.

Alors tout ce que vous devez faire est d'ajouter le style overflow: auto à la classe de contenu.

.ui-accordion .ui-accordion-content{ 
    overflow:auto; 
} 

Answer 4

Set margin:0 et padding:0 sur mes h3 et ul balises dans l'accordéon, et le sautillement sont partis.

Answer 5

Une solution simple consiste à placer le widget dans une balise <div> et à appliquer l'accordéon à cette balise à la place. Sinon, l'action d'accordéon essaie d'ajuster les marges et le remplissage, ce qui provoque la "nervosité".

Answer 6

Pour moi, il vient de se terminer par être quelqu'un mis une foutue min-hauteur sur la plongée contenu .ui-accordéon soo ...

.ui-accordion-content{ min-height: unset; } 

a fonctionné pour moi