Pardonnez-moi si cela a été abordé avant, je n'ai rien trouvé.
Je vais animer une barre de contenu qui a des enfants absolument positionnés à l'extérieur (via des marges négatives). L'idée est que les enfants animeront avec la barre, car il se développe.
Que se passe-t-il est dès que l'animation commence les enfants disparaissent, puis réapparaissent lorsque l'animation est terminée. C'est comme si l'animation doit être terminée avant que le navigateur sache où mettre les enfants.
J'ai téléchargé un exemple vraiment simple ici, tous les scripts inclus à la page: http://www.ismailshalis.com/jdemo/
Qu'est-ce qui se passe réellement? Quelles sont mes options pour travailler autour de cela?
Merci d'avance,
Belinda
4 Réponses :
Lorsque JQuery anime soit la hauteur ou la largeur d'un élément, il définira automatiquement Vous verrez que le L'animation fonctionne comme vous avez voulu. Je ne suis pas sûr d'une solution de contournement autre que de modifier la source de jQuery en commentant cette ligne ci-dessus. débordement: caché sur l'élément pendant que l'animation se produit. Étant donné que votre élément enfant est positionné à l'extérieur, il fait techniquement une partie du débordement. Le commentaire dans la source de jQuery près du code qui fait cela dit "// S'assurer que rien ne se faufile." Si vous incluez la source de jQuery non compressée et que vous commencez la ligne 4032 de jquery-1.3.2.js (à l'intérieur de la fonction animer ):
Merci à vous deux pour votre contribution. Matt a fourni l'explication et Jeff la solution, j'ai opté pour une enveloppe autour du lot. Pas idéal car je dois maintenant animer deux cases, mais au moins cela fonctionne. Merci!
C'était un très bon travail de détective mat. J'ai appris quelque chose de nouveau aujourd'hui, merci!
Wow. Il suffit de courir dans ce problème et votre solution est fixée, Matt. Merci! Le numéro de ligne est naturellement incorrect dans les versions plus récentes de JQuery, mais à la recherche de this.style.overflow = "caché"; trouvé.
Réglage de l'élément animé CSS sur Overflow: visible! IMPORTANT; fonctionne aussi. par cette réponse
Eh bien - il semble que c'est une fonction du navigateur ou de la jQuery, pas nécessairement de la manière dont vous avez construit votre HTML ou JavaScript. Je dis cela parce qu'il semble que la zone de pixel à l'intérieur de la boîte à bornes de l'élément DOM semble être rendue (essayez de déplacer le texte de sorte que la moitié du texte soit à l'extérieur et à moitié à l'intérieur ... Vous voyez une pièce "coupée" de texte comme il anime.)
Voici donc le travail autour de: il utilise un wrapper div autour de "#box" et "#out au-dessus de telle que les deux sont à l'intérieur de la boîte de sélection de Wrapper.
CSS: et le HTML: et le javascript:
AS de JQuery 1.4.3 Il existe une autre solution qui ne nécessite pas de modification de jQuery. Si vous définissez le style 'Overflow' de l'élément que vous animez en tant que style inline avant de démarrer l'animation, JQuery ne définira pas le style 'Overflow' sur caché. Par exemple:
Je suis désolé. Ce truc est assez vieux. L'animation de JQuery a probablement beaucoup changé depuis la version 1.4.3.
Impressionnant. Travaillé pour moi (JQuery 1.10)
Alternativement, vous pouvez indiquer votre préférence que l'élément reste visible code> à l'aide de la spécification ! Important code>. #box {
overflow: visible !important;
}