Mes compétences de jQuery sont plutôt bonnes normalement, mais cela me rend MAD!
C'est un accordien assez simple que j'ai codé à partir de zéro. En utilisant JQuery 1.3.2 Donc, il ne devrait donc pas y avoir de bugs saut, mais essentiellement si Vous jetez un coup d'oeil à l'exemple:
10 Réponses :
Obtenez la hauteur une fois que la DIV a terminé son animation à partir du rappel. Il est possible que vous ayez la hauteur lorsque la DIV est en train d'être animée et que vous obtenez une valeur transitoire.
Si votre animation est nerveuse, essayez d'utiliser les rappels. N'ouvrez pas de div et de cacher un div en même temps. Au lieu de cela, cachez votre premier DIV et dans le rappel indiquez votre prochain DIV. redsquare: http://jqueryfordesigners.com/slitown-animation-jump-revisited/
mis à jour (à partir des commentaires):
Merci pour la réponse, mais je n'essaie pas d'obtenir la hauteur - ce n'est que des informations de débogage. Je veux juste que cela animait bien sans sauter!
Pouvez-vous ne pas voir l'effet sur le lien de démonstration? Lorsque vous appuyez sur les deux premiers onglets, le contenu saute en bas au lieu de faire glisser tout le chemin. Il ne s'agit pas d'animation en douceur comme il le fait avec la troisième onglet. Selon le panneau à droite de la page, il ne s'agit pas de la bonne hauteur pour animer aussi. Il semble ne pas y travailler une fois qu'il l'a animé une fois.
Essayez de enchaîner vos animations ensemble à travers leurs rappels.
Mizu, vous êtes incorrect sur la hauteur. Vous attrapez la hauteur avant que la div soit même visible complètement. Cela vous donnera une hauteur incomplète - ce serait comme moi mesurer votre taille lorsque vous vous penchez pour attacher votre chaussure.
Ok j'ai effacé confondu la question en incluant les informations sur la hauteur. QUESTION SIMPLE QUESTION ALORS, POURQUOI NE PAS SDITHOWN () dans cet exemple d'affichage en douceur. Il affiche les premiers x pixels, puis saute le reste.
Mizu, utilisez les rappels. J'ai mis à jour ma réponse avec un exemple.
Merci Jonathan, ce n'est pas que je ne crois pas et j'apprécie la réponse, mais ce n'est toujours pas correct. Voici une véritable version simple avec une seule onglet à l'aide de la diapeToggle. Mizudesign.com/jquery/accordian/simple.html Il saute toujours à le bas plutôt que d'animation en douceur.
Vous avez besoin d'une hauteur / largeur sur la div. Remy Sharp a un article de blog à propos de ce numéro voir jqueryfordesigners.com/slitown-animation-jumpavision
Si j'ajoute une largeur ou une hauteur à ce contenu, l'animation devient lisse
Ajout d'une hauteur prédéfinie pour une boîte de texte est un peu ... moche, non?
Jon - a accepté Oui. Une autre façon est de charger le même contenu offscreen et d'appliquer la hauteur de manière dynamique. À la fois pas bon et résulte de JQ 1.3+ lorsque le code de la dimension a été réécrit
Jonathan Vous n'êtes pas tort - surtout comme cela va être un contenu dynamique, donc je ne sais pas quelle hauteur il doit être! Oh bien :( Merci pour toute votre aide.
Je dois admettre que j'ai trouvé ma propre solution dynamique maintenant. Mizudesign.com/jquery/accordian/basic.html doit être corrigé. C'est très simple vraiment - ajoute simplement la hauteur en utilisant .CSS avant de cacher la DIV. Fonctionne un régal :)
Vous avez besoin d'une largeur ou d'une hauteur sur le contenu pour l'animer en douceur.
Merci j'avais lu le post mais supposé (comme je lisais un bug ailleurs) qu'il a postulé à une version précédente de JQuery. Honte.
Doit admettre que je pense avoir trouvé une meilleure solution depuis que je joue avec elle - comme documenté ci-dessous! :)
Il ajoute toujours la hauteur à l'élément!
Sauf que cela stocke la hauteur dans le DOM pour référence à tout moment. J'ai commencé à regarder avec JQuery .data pour stocker les informations mais cela semblait beaucoup plus efficace :)
Ce lien a expiré pour moi, en faisant une réponse à une utilisation limitée. "Les liens vers des ressources externes sont encouragés, mais veuillez ajouter du contexte autour du lien afin que vos collègues utilisateurs auront une idée de ce que c'est et pourquoi il est là. Citez toujours la partie la plus pertinente d'un lien important, au cas où le site cible est inaccessible ou va de manière permanente hors ligne. "
@crackerjack Ces règles n'étaient pas en jeu en 2009
Je pense que le problème est que lorsque le rembourrage ou la marge est ajouté, il saute, c'était le cas par moi. Vous devez animer la marge dans le rappel
aussi "Gardez à l'esprit" que les tables se comportent de buggy avec SlideUp SlideUp et utilisent plutôt Fadein Fadeout
C'était de loin la solution la plus facile, que des tables soient impliquées ou non. J'ai essayé de définir la hauteur de CSS et d'autres astuces trouvées ici, mais Fadein / Fadeout travaillait brillamment.
Je dois admettre que j'ai trouvé ma propre solution dynamique maintenant.
http: //www.mizudesign.com/jquery/accordian/basic.html doit être corrigé.
C'est très simple - ajoute simplement la hauteur en utilisant .CSS avant de cacher la DIV.
Fonctionne un traitement :)
Incroyable Comment les gars de JQuery ont laissé celui-ci au ... merci! Résout vraiment n'importe quel problème. Pour les âges, je cherchais une solution de tricot droite.
Cela a fonctionné pour moi:
J'ai aussi eu un problème gênant Le correctif ajout simplement SlideUp () de saut qui s'est produit sur Safari, mais pas en chrome ou à savoir. Il s'est avéré que la balise divisée que je cachais / montrant était juste en dessous d'une autre balise divique contenue float: laissé divs. Au cours de la glissement, les divs flottants seraient momentanément rendu à nouveau, causant le saut.
clair: au style de la cachette / montrant div.
Mon problème est que puisque j'ai un design display: none;
overflow: hidden;
position: relative !important;
Le problème est dû à IE (Mode QuiRKS) essayant de rendre "Hauteur: 0PX".
Le correctif: Animate Hauteur à 1 (pas 0), puis masquez et réinitialisez la hauteur: P>
// slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
// hide last pixel and reset height
$(this).hide().css({ height:"" });
}
});
Remplacement des valeurs de marge-haut et de marge-bas avec des valeurs de remplissage et de remplissage de remplissage. N'oubliez pas de définir la valeur de la marge sur 0 après cela.
Pour moi, le problème était la marge (ou le rembourrage) sur la Div pour afficher / se cacher avec la diapositive, mais je devais donner la marge (ou le rembourrage) à cette DIV. J'ai résolu avec cette astuce: