web-dev-qa-db-fra.com

hauteur slideToggle est "sauter"

Mon expérience jQuery slideToggle()

Quelqu'un peut-il me dire pourquoi mes boîtes "sautent" quand je les ouvre? La première moitié ils glissent, le reste ils "sautent" ??

Merci, Johannes

jqueryslidetoggle
26
Johannes

C'est une solution simple. Ajoutez cette règle CSS à votre feuille de style ( Testé dans Firebug pour fonctionner, et de mon expérience passée avec ce problème, c'est le correctif ):

ol.message_list { position: relative }

C'est un bogue CSS, pas un bogue jQuery en tant que tel.

23
Doug Neiner

Ce qui m'aide, c'est

overflow: hidden

à la bascule qui ...

20
Youngcut

La solution la plus rapide dans votre cas:

.message_container { width: 361px; }

Je ne sais pas exactement pourquoi, mais ne donnant pas au conteneur une largeur fixe lorsqu'il contient un <p> cause des problèmes, donnez-lui un et le saut disparaîtra.

11
Nick Craver

css padding et jquery slideToggle ne fonctionnent pas bien ensemble. Essayez d'encadrer le rembourrage.

5
Bloggerschmidt

Si elle est définie, la propriété min-height peut également déclencher un tel problème. Dans ce cas, vous devez le réinitialiser: 

.toggle-container {
position: relative;
min-height: 0;
}
4
kursus

J'ai trouvé ce problème dans de nombreuses occasions dans lesquelles je n'animais que la hauteur avec slideToggle mais pas la marge/remplissage.

Donc, quelque chose comme ceci pourrait le résoudre:

$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});
4
Seb

Par accident, je pense que la solution la plus facile à utiliser consiste à ajouter une fonction personnalisée à jQuery avec une marge de remplissage/marge animée animée.

//this function is to avoid slideToggle jQuery jump bug.
$.fn.slideShow = function(time,easing) { return $(this).animate({height:'show','margin-top':'show','margin-bottom':'show','padding-top':'show','padding-bottom':'show',opacity:1},time,easing); }
$.fn.slideHide = function(time,easing) {return $(this).animate({height:'hide','margin-top':'hide','margin-bottom':'hide','padding-top':'hide','padding-bottom':'hide',opacity:0},time,easing);  }

Et exemple d'utilisation:

$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');

Mon exemple tu/opacité animée bascule tu, tu peux le modifier selon tes besoins.

2
Adarchy

Je trouve que la solution la plus simple est généralement de supprimer le remplissage de l’élément qui glisse et d’ajouter du remplissage à un élément inside l’élément de glissement.

Dans cet exemple, la div avec l'attribut data-role="content" est celle qui glisse et le remplissage est appliqué à tab-example__content

<div data-role="content" class="tab-example__content">
    ...
</div>

Pour corriger le glissement 'saccadé' j'ai ajouté une nouvelle div à l'intérieur de l'élément glissant et déplacé le class/padding vers celui-ci, comme suit:

<div data-role="content">
    <div class="tab-example__content">
        ...
    </div>
</div>

Il est maintenant agréable et lisse

2
Ben Crook

Dans ma situation passée, j'avais le même problème, et le problème était que j'avais la déclaration transition: all 350ms; dans mon CSS qui était en conflit avec .slideToggle. Le fait de supprimer cela a résolu le problème pour moi, alors recherchez les transitions dans CSS.

0
Usce

si la boîte basculée n'a pas de hauteur par défaut, vous devez l'ajouter. Pour la hauteur automatique, ajoutez ceci:

.toggle-container {
 height: auto;
}
0
Ivan Skoropadsky

J'ai trouvé encore une autre chose qui l'affecte. Supprimer min-height du CSS de cet élément me l'a corrigé.

0
quemeful

J'ai trouvé la définition d'une largeur sur le conteneur à bascule a résolu le problème pour moi

.toggle-container { 
   width: 100%; }
}

Je lis que slideToggle repose sur une largeur et une hauteur de départ pour fonctionner correctement. Ainsi, en fonction de votre page, vous devrez peut-être définir la largeur ou la hauteur pour obtenir le comportement que vous attendez.

0
pickles