Basic jQuery slideUp et slideDown me rend fou!

StackOverflow https://stackoverflow.com/questions/1092245

  •  11-09-2019
  •  | 
  •  

Question

mes compétences jQuery sont assez bien normalement, mais cela me conduit fou!

Il est assez simple d'un accordian j'ai codé à partir de zéro. En utilisant jQuery 1.3.2 donc il ne devrait pas y avoir des bugs de saut, mais, fondamentalement, si vous jetez un oeil à l'exemple:

http://www.mizudesign.com/jquery/accordian/basic.html

J'affiche la hauteur de la div cible à droite - si elle contient du texte, il pense qu'il est plus court que et le saut. Si c'est une image il n'y a pas de problème.

Je ne peux pas savoir où je vais mal - il est évidemment dans le CSS quelque part, mais je l'ai essayé tous les suspects habituels comme display: block

Toutes les idées reçus avec reconnaissance!

Bien à vous, Chris

PS S'il vous plaît pardonnez la nature du code source, je l'ai déchiré dehors l'ensemble du projet, je travaille là-dessus ne comprend donc quelques divs que ne pas vraiment besoin d'être là.

Était-ce utile?

La solution

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

Autres conseils

Je dois admettre que j'ai trouvé ma propre solution dynamique maintenant.

http://www.mizudesign.com/jquery/accordian/basic.html doit être fixé.

Il est très simple, vraiment - ajoute juste la hauteur à l'aide Css avant de se cacher la div. Fonctionne un régal:) 

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

$("#PlayerButtonsContent div").hide();

Je pense que le problème est que lorsque le remplissage ou la marge est ajoutée puis il saute, ce fut le cas par moi. vous devez animer la marge dans le rappel

De plus "garder à l'esprit" que les tables se comportent bogué avec slideDown slideUp et utiliser plutôt fadeIn fadeOut

Obtenez la hauteur une fois que la div a terminé son animation à partir du rappel. Il est possible que vous obtenez la hauteur tandis que la div est animée, et vous obtenez une valeur de transition.

Si l'animation est saccadée, essayez d'utiliser les callbacks. Ne pas ouvrir un div et cacher un div en même temps. Au lieu de cela, cacher votre première div, et dans la fonction de rappel montrer votre prochaine div. 

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

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

  

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

J'ai aussi eu un problème de saut de slideUp() ennuyeux qui a eu lieu sur Safari, mais pas de chrome ou IE. Il est avéré que la balise div je me cachais / montrant était juste en dessous une autre balise div qui contenait divs float:left. Lors de glisser vers le haut, les divs flottants seraient momentanément réaffichée causant le saut.

Le correctif a été tout simplement en ajoutant clear:both au style de la dissimulation / div montrant.

Mon problème est que depuis que j'ai un responsive design Je ne sais pas ce qui va être la largeur ou la hauteur de mon élément. Après avoir lu 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 était changer la position de mon élément fixe et de jouer avec la mise en page de l'élément. J'ajouté ce qui suit à mon CSS pour l'élément et n'a pas remarqué les mauvais effets secondaires dans IE7 +, Firefox, Chrome et Safari. 

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

Remplacement de la marge supérieure et les valeurs de marge en bas avec padding-top et les valeurs-bas rembourrage fait le tour pour moi. Ne pas oublier de définir la valeur de marge à 0 après.

Cela a fonctionné pour moi: 

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

La question est due à IE (mode bizarreries) essayant de rendre "la hauteur: 0px".

Le correctif: Animer hauteur 1 (0), puis cacher et réinitialiser la hauteur: 

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

Pour moi, le problème était la marge (ou rembourrage) sur la div pour afficher / cacher avec toboggan, mais je devais donner la marge (ou remplissage) à cette div. Je résolus avec cette astuce: 

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top