Meine jQuery slideToggle() Experiment
Kann mir jemand sagen, warum meine Boxen “springen”, wenn ich sie öffne? Die erste Hälfte rutschen sie, den Rest “springen” sie??
Vielen Dank,
Johannes
slideToggle Höhe “springt”
Lesezeit: 2 Minuten
11689800cookie-checkslideToggle Höhe “springt”
Johannes
Es ist eine einfache Lösung. Fügen Sie diese CSS-Regel Ihrem Stylesheet hinzu (Getestet in Firebug, um zu funktionieren, und aus meiner bisherigen Erfahrung mit diesem Problem ist dies die Lösung):
ol.message_list { position: relative }
Es ist ein CSS-Fehler, kein jQuery-Fehler an sich.
-
Ich hatte das gleiche Problem und habe diesen Fix ausprobiert, aber er hat bei mir nicht funktioniert, also musste ich aufgeben und einen anderen Ansatz wählen (direkt vor der Folie den Einschubbereich mit Deckkraft 0 sichtbar machen, den Container verschieben so weit nach oben, dann schieben Sie es einfach so wieder nach unten).
– ehdv
24. Februar 2010 um 20:12 Uhr
-
Hatte gerade dieses Problem, dank Google & Stack Overflow hat diese Lösung auch für mich funktioniert. Um es zu abstrahieren, wird der Container des Elements benötigt, das gleitet
position:relative.– bcmcfc
4. November 2010 um 12:07 Uhr
-
In meinem Fall brauchten sowohl das umzuschaltende Element als auch sein übergeordnetes Element die Position:relative-fix.
– k0pernikus
27. Juni 2012 um 14:23 Uhr
Was mir hilft ist
overflow: hidden
zu diesem Umschalter …
-
overflow: hidden;war die Zaubersauce für mich. Ich habe es versuchtposition: relative;undmin-height: 0;aber beides funktionierte nicht.– Wade
10. Dezember 2015 um 14:13 Uhr
Die schnellste Lösung in Ihrem Fall:
.message_container { width: 361px; }
Ich bin mir nicht sicher, warum, aber dem Container keine feste Breite zu geben, wenn er a enthält <p> Probleme verursacht, gib ihm eins und die Nervosität verschwindet.
-
Dies scheint auch für andere textorientierte Elemente zu gelten, wie z
<label>.– joanwolk
30. Mai 2012 um 10:21 Uhr
css padding und jquery slideToggle funktionieren nicht gut zusammen. Versuchen Sie, die Polsterung auszupacken.
Ich habe dieses Problem bei vielen Gelegenheiten festgestellt, bei denen ich nur die Höhe mit animiert habe slideToggle aber nicht der Rand/die Füllung.
Also, so etwas könnte es lösen:
$("#thediv").slideToggle().animate({"margin-bottom": "toggle"});
Kursus
Wenn gesetzt, die min-height Eigenschaft kann auch einen solchen Fehler auslösen. In diesem Fall müssen Sie es zurücksetzen:
.toggle-container {
position: relative;
min-height: 0;
}
Adarchie
Versehentlich denke ich, dass die am einfachsten zu verwendende Lösung darin besteht, jQuery eine benutzerdefinierte Funktion mit animiertem 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 Anwendungsbeispiel:
$(this).slideShow(320,'easeOutQuart');
$(this).slideHide(320,'easeOutQuart');
Mein animiertes Beispiel zum Umschalten der Deckkraft können Sie nach Bedarf ändern.
