Meine jQuery slideToggle() ExperimentslideToggle Höhe „Springen“
Kann mir jemand sagen, warum meine Boxen „springen“, wenn ich sie öffnen? Die erste Hälfte rutschen sie, den Rest "springen" sie?
Danke, Johannes
fand ich dieses Problem in vielen Gelegenheiten, in denen ich mit slideToggle nur die Höhe Animieren wurde aber nicht der Marge/padding.
Also, so etwas wie dies könnte es lösen:
$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});
Der schnellste Update in Ihrem Fall:
.message_container { width: 361px; }
Ich bin nicht genau sicher, warum, aber nicht gibt den Behälter eine feste Breite wenn ein <p> Ursachen Fragen enthält, geben sie es ein und jumpyness weggeht.
Es ist eine einfache Lösung. Fügen Sie diese CSS-Regel zu Ihrem Stylesheet (in Firebug Getestet zu arbeiten, und aus meinen bisherigen Erfahrungen mit diesem Problem, das ist das Update):
ol.message_list { position: relative }
Es ist ein CSS-Fehler, kein jQuery Fehler per se .
+1 Getestet. Scheint, es richtig gereinigt zu haben. – Sampson
Ich hatte das gleiche Problem und probierte diesen Fix, aber es funktionierte nicht für mich, also musste ich aufgeben und einen anderen Ansatz wählen (direkt vor der Folie, den Einschiebebereich mit der Opazität 0 sichtbar machen, die verschieben Container so hoch, dann schieben Sie es einfach auf diese Weise zurück). – ehdv
Gerade hatte ich dieses Problem, dank Google & Stack Overflow funktionierte diese Lösung auch für mich. Um es zu abstrahieren, benötigte der Container des Elements, das verschoben wurde, "position: relative". – bcmcfc
Versehentlich denke ich, dass die einfachste Lösung zu verwenden, ist auch benutzerdefinierte Funktion jQuery mit belebtem padding/margin-top/bottom 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 animierte Opazität Toggle-tu, Sie können es ändern, wie Sie benötigen.
CSS padding und jquery slideToggle nicht gut zusammenarbeiten. Versuchen Sie, die Polsterung zu schließen.
Was für mich hilft ist
overflow: hidden
zum diesem Knebel ...
'Überlauf: versteckt;' war die magische Soße für mich. Ich probierte 'Position: relative;' und 'min-height: 0;', aber keiner funktionierte. –
Arbeitete auch für mich, aber ich verstehe nicht warum ... –
Das ist die Lösung, die auch für mich funktionierte. –
Wenn gesetzt, die min-height Eigenschaft auch eine solche Panne auslösen können. In diesem Fall müssen Sie es zurücksetzen:
.toggle-container {
position: relative;
min-height: 0;
}
Ich finde die einfachste Lösung ist in der Regel das Polster aus dem Element zu entfernen, gleitet, und fügen Sie Polsterung zu einem Element innerhalb das Schiebeelement.
In diesem Beispiel wird das div mit dem Attribut von data-role="content" ist derjenige, gleitet, und die Polsterung zu tab-example__content
<div data-role="content" class="tab-example__content">
...
</div>
angewendet wird, um die ‚ruckartige‘ zu beheben Schiebe ich ein neues div innerhalb des Gleitelementes hinzugefügt und bewegt die Klasse/padding zu, dass, wie so:
<div data-role="content">
<div class="tab-example__content">
...
</div>
</div>
Es ist jetzt schön glatt
Dies gilt auch für andere textorientierte eleme um wahr zu sein scheint B. '