Basic jQuery slideUp und slideDown macht mich verrückt!

Question

Meine jQuery-Kenntnisse sind normalerweise ziemlich gut, aber das hier macht mich fertig verrückt!

Es ist ein ziemlich einfaches Akkordeon, das ich von Grund auf neu programmiert habe. Mit jQuery 1.3.2, also sollte es keine springenden Bugs geben, aber im Grunde, wenn Sie einen Blick auf das Beispiel werfen:

http://www.mizudesign.com/jquery/accordian/basic.html

Ich zeige die Höhe für das Ziel-Div auf der rechten Seite an - wenn es Text enthält, denkt es, er sei kürzer als er ist und springt. Wenn es ein Bild ist, gibt es kein Problem.

Ich kann nicht herausfinden, was ich falsch mache - es liegt offensichtlich an der CSS irgendwo, aber ich habe alle üblichen Verdächtigen ausprobiert, wie display:block

Für jede Idee sind wir dankbar!

Ihr, Chris

PS Bitte verzeihen Sie die Art des Quellcodes, ich habe ihn herausgerissen Projekt, an dem ich arbeite, herausgerissen, so dass er einige Divs enthält, die nicht wirklich dort sein müssen.

Answer 1

Ich muss zugeben, dass ich jetzt meine eigene dynamische Lösung gefunden habe.

http://www.mizudesign.com/jquery/accordian/basic.html sollte behoben werden.

Es ist wirklich sehr einfach - nur fügt die Höhe mit .css vor dem Ausblenden der div. Funktioniert prima :)

$("#PlayerButtonsContent div").each (function() {
$(this).css("height", $(this).height());
});

$("#PlayerButtonsContent div").hide();

Answer 2

Sie benötigen eine Breite oder Höhe für den Inhalt, damit dieser reibungslos animiert werden kann.

Answer 3

Ich denke, das Problem ist, dass, wenn Polsterung oder Rand hinzugefügt wird, dann springt es, das war der Fall von mir. Sie müssen den Rand in der Callback animieren

Denken Sie auch daran, dass sich Tabellen mit slideDown slideUp fehlerhaft verhalten und verwenden Sie lieber fadeIn fadeOut

Answer 4

Holen Sie sich die Höhe, sobald das Div seine Animation aus dem Callback beendet hat. Es ist möglich, dass Sie die Höhe erhalten, während das Div animiert wird, und Sie erhalten einen Übergangswert.

Wenn Ihre Animation sprunghaft ist, versuchen Sie, die Rückrufe zu verwenden. Öffnen Sie nicht gleichzeitig ein Div und blenden Sie ein Div aus. Blenden Sie stattdessen Ihr erstes Div aus und zeigen Sie innerhalb des Rückrufs Ihr nächstes Div.

$(".someDiv").slideUp("normal", function(){
  /* This animation won't start until the first
     has finished */
  $(".someOtherDiv").slideDown();
});

Aktualisiert (aus den Kommentaren):

redsquare: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/

Answer 5

Ich hatte auch eine lästige slideUp() Sprungproblem, das bei Safari auftrat, aber nicht bei Chrome oder IE. Es stellte sich heraus, dass das div-Tag, das ich ausblendete/einblendete, direkt unter einem anderen div-Tag lag, das Folgendes enthielt float:left divs. Während des Hochschiebens würden die schwebenden Divs kurzzeitig neu gerendert werden, was den Sprung verursacht.

Die Lösung war einfach das Hinzufügen von clear:both auf den Stil des ein-/ausblendenden Div.