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

  1. 17

    Vous avez besoin d'une largeur ou de la hauteur sur le contenu pour animer en douceur.

    Merci j'avais lu le post, mais suppose (que j'avais lu un bug d'ailleurs) qu'elle s'applique à une précédente version de jQuery. De la honte.
    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

  2. 17

    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 🙂

    $("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();
    Incroyable de voir comment les gars de JQuery laissez passer... merci! Résout vraiment tout problema. Depuis longtemps je cherchais un droit de tricot solution.

    OriginalL'auteur Mizu

  3. 3

    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

    Ce fut de loin la solution la plus simple, si oui ou non les tables sont impliqués. J'ai essayé de réglage css hauteur et d'autres trucs trouvés ici, mais fadeIn/fadeOut a fonctionné à merveille.

    OriginalL'auteur adardesign

  4. 1

    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.

    $(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

    Mis à jour (D'après les commentaires):

    redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

    Merci pour la réponse, mais je ne cherche pas à obtenir la hauteur vraiment - c'est juste les informations de débogage. J'ai juste envie d'animer joliment sans sauter!
    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

  5. 1

    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 contenait float: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

  6. 1

    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.

    display: none;  
overflow: hidden;
position: relative !important;

    OriginalL'auteur Blake Plumb

  7. 1

    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

  8. 0

    Cela a fonctionné pour moi:

    $(this).pathtoslidingelementhere.width($(this).parent().width());

    OriginalL'auteur Smirnoff

  9. 0

    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:

    //slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        //hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

    OriginalL'auteur sciroccohsd

  10. 0

    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:

      .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }

    OriginalL'auteur Fred K