webentwicklung-frage-antwort-db.com.de

slideToggle Höhe ist "springen"

Mein jQuery slideToggle()-Experiment

Kann mir jemand sagen, warum meine Boxen "springen", wenn ich sie öffne? Die erste Hälfte rutschen sie, der Rest "springen" ??

Danke, Johannes

26
Johannes

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.

23
Doug Neiner

Was mir hilft, ist

overflow: hidden

zu dem Knebel ...

20
Youngcut

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.

11
Nick Craver

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

5
Bloggerschmidt

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;
}
4
kursus

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"});
4
Seb

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.

2
Adarchy

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

2
Ben Crook

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.

0
Usce

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;
}
0

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

0
quemeful

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.

0
pickles

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.

0
kzhao14