La base de jQuery slideUp et slideDown me rend fou!
mon jQuery compétences sont assez bon normalement mais cette conduite est moi
mad!
Il est assez simple d'accordéon que j'ai codé en place à partir de zéro. À l'aide de
jQuery 1.3.2 donc il ne devrait pas y avoir de saut de bugs mais, fondamentalement, si
vous jetez un oeil à l'exemple:
http://www.mizudesign.com/jquery/accordian/basic.html
Je suis de l'affichage de la hauteur de la cible de la div sur le droit - si c'
contient du texte, il pense qu'il est plus court qu'il est et de sauter.
Si c'est une image il n'y a pas de problème.
Je ne peux pas savoir où je vais mal - c'est évidemment dans le CSS
quelque part, mais j'ai essayé tous les suspects habituels comme display:block
Toute idée sera la bienvenue!
Vôtre,
Chris
PS s'il vous Plaît pardonnez la nature de la source de code, j'ai déchiré dehors
l'ensemble du projet, je travaille sur de sorte qu'il ne comprennent certains divs qui
n'avez pas vraiment besoin d'être là.
OriginalL'auteur Mizu | 2009-07-07
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin d'une largeur ou de la hauteur sur le contenu pour animer en douceur.
Dois avouer que je crois que j'ai trouvé une meilleure solution, car en jouant avec elle - comme indiqué ci-dessous! 🙂
- il encore basiclly ajoute la hauteur de l'élément!
Sauf qu'il stocke la hauteur dans les DOM pour la référence à n'importe quel point dans le temps. J'ai commencé à regarder à l'aide de jQuery .de données à stocker l'info mais cela semblait beaucoup plus efficace 🙂
Ce lien a expiré pour moi, faisant de réponse de l'utilisation limitée. "Liens vers des ressources externes sont encouragés, mais s'il vous plaît ajouter un cadre autour de le lien pour que les autres utilisateurs pourront avoir une idée de ce qu'il est et pourquoi il est là. Toujours citer la partie la plus pertinente d'un lien important, dans le cas où l'objectif du site est inaccessible ou va définitivement hors ligne."
OriginalL'auteur redsquare
Je dois avouer que j'ai trouvé ma propre solution dynamique maintenant.
http://www.mizudesign.com/jquery/accordian/basic.html doit être fixe.
Il est vraiment très simple - il suffit de ajoute de la hauteur à l'aide .css avant de cacher le div.
Fonctionne un régal 🙂
OriginalL'auteur Mizu
Je pense que le problème est, que lorsque le remplissage ou la marge est ajoutée puis il saute, cela a été le cas pour moi. vous avez pour animer la marge dans le rappel
Aussi "garder à l'esprit" que les tables se comporter buggy avec slideDown slideUp et plutôt utiliser fadeIn fadeOut
OriginalL'auteur adardesign
Obtenir la hauteur une fois la div a fini son animation de la fonction de rappel. Il est possible que vous êtes l'obtention de la hauteur tandis que le div est animée, et vous obtenez une transition valeur.
Si votre animation est nerveux, essayez d'utiliser les callbacks. Ne pas ouvrir un div et de masquer un div en même temps. Au lieu de cela, cacher votre premier div, et dans le rappel de montrer votre prochaine div.
Mis à jour (D'après les commentaires):
Qu'entendez-vous par le saut d'obstacles?
Ne pouvez-vous pas voir l'effet sur le lien de démonstration? Lorsque vous appuyez sur les deux premiers onglets de contenu saute en bas au lieu de glisser vers le bas. Ce n'est pas l'animation en douceur, comme il le fait avec le troisième onglet. Selon le panneau sur la droite de la page, il n'est pas en tirant la bonne hauteur pour animer. Elle semble être la seule à s'en sortir une fois qu'il est animé d'une fois.
Essayez le chaînage de vos animations, ensemble, par le biais de leurs rappels.
Je dois avouer que j'ai trouvé ma propre solution dynamique maintenant. mizudesign.com/jquery/accordian/basic.html devrait être fixé. Il est vraiment très simple - il suffit de ajoute de la hauteur à l'aide .css avant de cacher le div. Fonctionne un régal 🙂
OriginalL'auteur Sampson
J'ai aussi eu une fâcheuse
slideUp()
sauter problème qui survient sur Safari, mais pas chrome ou IE. Il s'est avéré que la balise div, j'ai été masquage/affichage était juste en dessous de l'autre balise div qui contenaitfloat:left
divs. Pendant glisse vers le haut, les divs flottantes seraient momentanément re-rendus provoque le saut.La solution était tout simplement de l'ajout
clear:both
pour le style de la cacher/montrer la div.OriginalL'auteur beaves
Mon problème est que depuis que j'ai un responsive design je ne sais pas ce que la largeur ou la hauteur de mon élément. Après la lecture de ce billet de blog http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm j'ai réalisé que jQuery a été de changer la position de mon élément fixe et de jouer avec la mise en page de l'élément. J'ai ajouté ce qui suit à mon CSS de l'élément et n'ai pas remarqué de mauvais effets secondaires dans IE7+, firefox, chrome et safari.
OriginalL'auteur Blake Plumb
Remplacement margin-top et margin-bottom valeurs avec padding-top et padding-bottom valeurs a fait le tour pour moi. N'oubliez pas de définir la valeur de la marge à 0 après ce.
OriginalL'auteur 3rik82
Cela a fonctionné pour moi:
OriginalL'auteur Smirnoff
Le problème est lié à IE (en mode quirks) en essayant de rendre "height:0px".
Le correctif: Animer hauteur de 1 (et non 0), puis se cacher et de réinitialiser hauteur:
OriginalL'auteur sciroccohsd
Pour moi, le problème était la marge (ou remplissage) sur la div pour afficher/cacher l'aide de la diapositive, mais j'avais besoin de donner de la marge (ou remplissage) pour que la div. J'ai résolu avec cette astuce:
OriginalL'auteur Fred K