slideToggle Höhe ist "springen"

Es ist eine einfache Lösung. Fügen Sie diese CSS-Regel Ihrem Stylesheet hinzu ( In Firebug getestet, um zu funktionieren, und aus meiner Erfahrung mit diesem Problem ist dies der Fix ):

ol.message_list { position: relative }

Es ist ein CSS-Fehler, kein JQuery-Fehler an sich.

Was mir hilft, ist

overflow: hidden

zu dem Knebel ...

Die schnellste Lösung für Ihren Fall:

.message_container { width: 361px; }

Ich weiß nicht genau warum, aber wenn dem Container keine feste Breite gegeben wird, wenn er einen <p> enthält, führt dies zu Problemen.

css padding und jquery slideToggle arbeitet nicht gut zusammen. Versuchen Sie, die Polsterung einzupacken.

Wenn gesetzt, kann die min-height-Eigenschaft auch eine solche Störung auslösen. In diesem Fall müssen Sie es zurücksetzen: 

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

Ich habe dieses Problem bei vielen Gelegenheiten gefunden, bei denen ich nur die Höhe mit slideToggle animierte, nicht jedoch den Rand/das Auffüllen.

So etwas könnte es lösen:

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

Aus Versehen glaube ich, dass die einfachste zu verwendende Lösung darin besteht, jQuery mit benutzerdefinierten Funktionen mit animierter Polsterung/Rand oben/unten hinzuzufügen.

//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);  }

Und Useage-Beispiel:

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

Mein Beispiel für eine animierte Opazitätsumschaltung tu kann nach Bedarf geändert werden.

Ich finde, die einfachste Lösung besteht in der Regel darin, die Polsterung von dem Element, das gleitet, zu entfernen und einem Element innen dem Gleitelement eine Polsterung hinzuzufügen.

In diesem Beispiel ist das div mit dem Attribut data-role="content" das, das gleitet, und die Auffüllung wird auf tab-example__content angewendet.

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

Um das "ruckartige" Gleiten zu korrigieren, fügte ich ein neues div in das gleitende Element ein und verschob die Klasse/Polsterung so:

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

Es ist jetzt schön und glatt

In meiner früheren Situation hatte ich das gleiche Problem und das Problem war, dass ich die transition: all 350ms;-Deklaration in meinem CSS hatte, die mit .slideToggle in Konflikt stand. Wenn Sie das entfernen, wurde es für mich behoben. Suchen Sie also nach Übergängen in CSS.

wenn das umschaltbare Kästchen nicht standardmäßig die Höhe hat, müssen Sie es hinzufügen. Für die automatische Höhe fügen Sie Folgendes hinzu:

.toggle-container {
 height: auto;
}

Ich habe noch etwas gefunden, das es beeinflusst. Das Entfernen von min-height aus dem CSS dieses Elements hat es für mich behoben.

Das Festlegen einer Breite des umgeschalteten Containers hat das Problem für mich gelöst

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

Ich lese, dass slideToggle eine korrekte Startbreite und -höhe verwendet, um korrekt zu funktionieren. Abhängig von Ihrer Seite müssen Sie möglicherweise Breite oder Höhe einstellen, um das erwartete Verhalten zu erhalten.

Ich weiß nicht, ob dies immer noch ein Problem ist, aber was es für mich behoben hat, war, dass ich zuvor CSS verwendet hatte, um es zu "animieren", sodass ich einen transition -Effekt auf das Element hatte. Das Entfernen hat es für mich behoben.