Basic jQuery slideUp und slideDown driving me mad!

meine jQuery-Kenntnisse sind ziemlich gut normalerweise, aber das treibt mich
verrückt!

Es ist ein ziemlich einfaches Ziehharmonika habe ich von Grund auf neu codiert. Mit
jQuery 1.3.2, so sollte es keine jumping bugs, aber im Grunde, wenn
nehmen Sie einen Blick auf das Beispiel:

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

Ich bin die Anzeige der Höhe für das Ziel-div auf der rechten Seite - wenn es
enthält text, der es denkt, es ist kürzer als es ist und springen.
Wenn es ein Bild gibt ' s kein problem.

Ich nicht herausfinden können, wohin ich gehe falsch - es ist natürlich in der CSS
irgendwo, aber ich habe versucht, all die üblichen verdächtigen wie display:block

Irgendwelche Ideen wäre dankbar angenommen!

Yours,
Chris

PS Bitte verzeihen Sie die Art der source-code habe ich Riss es heraus
das ganze Projekt an dem ich arbeite, so schließt es einige divs, die
nicht wirklich brauchen, da zu sein.

InformationsquelleAutor Mizu | 2009-07-07

  1. 17

    Müssen Sie eine Breite oder Höhe auf die Inhalte, für die es zum nahtlosen animieren.

    Danke, ich hatte den post lese, aber davon ausgegangen (wie ich gelesen hatte, ein Fehler an anderer Stelle), dass es sich um eine frühere version von jQuery. Schade.
    Ich muss zugeben, ich glaube ich habe eine bessere Lösung gefunden, da zu spielen, um mit es - wie unten dokumentiert! 🙂
    es noch basiclly fügt die Höhe des Elements!
    Außer es speichert die Höhe in der DOM-Referenz, an jedem beliebigen Punkt in der Zeit. Ich schaute durch die Verwendung von jQuery .Daten speichern die info, aber das schien weit effizienter 🙂
    Link timed out-für mich ist die Antwort nur begrenzt von nutzen. "Links zu externen Ressourcen sind erwünscht, aber bitte fügen Sie Rahmen um den link, damit Ihre Kolleginnen und Nutzer haben eine Vorstellung davon, was es ist und warum es da ist. Immer zitieren die meisten relevanten Teil eine wichtige Verbindung, im Falle der Ziel-Website nicht erreichbar ist oder geht endgültig offline."

    InformationsquelleAutor redsquare

  2. 17

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

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

    Es ist ganz einfach - fügt nur die Höhe mit .css vor dem Versteck der div.
    Arbeitet ein Genuss 🙂

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

$("#PlayerButtonsContent div").hide();
    Erstaunlich, wie die Jungs in JQuery lassen Sie diese weitergeben... danke! Eigentlich löst jede problema. Seit Ewigkeiten war ich auf der Suche für einen straight knit Lösung.

    InformationsquelleAutor Mizu

  3. 3

    Ich denke, das problem ist, dass, wenn ein padding oder margin Hinzugefügt wird, dann springt er, dies war der Fall bei mir. Sie animieren die Marge in der callback -

    Auch "keep in mind", die Tabellen Verhalten sich buggy mit slideUp slideDown und eher fadeIn fadeOut

    Das war mit Abstand die einfachste Lösung, oder nicht, ob Tabellen beteiligt sind. Ich habe versucht css Höhe und andere tricks sind hier zu finden, aber fadeIn/fadeOut war Brillant.

    InformationsquelleAutor adardesign

  4. 1

    Höhe, sobald das div hat, beendet seine animation von der Rückruf. Es ist möglich, dass Sie immer die Höhe, während das div-Element animiert wird, und Sie bekommen eine übergangs-Wert.

    Wenn Ihre animation ist nervös, versuchen Sie, mit der Rückrufe. Öffnen Sie nicht ein div ein und ausblenden, div bei der gleichen Zeit. Stattdessen verstecken Sie Ihre ersten div, und innerhalb der callback-zeigen Sie Ihren nächsten 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/

    Vielen Dank für die Antwort, aber ich versuche nicht, um die Höhe wirklich - das ist nur debug-Informationen. Ich will ihn animieren, schön ohne zu springen!
    Was meinst du mit springen?
    Können Sie nicht sehen, die Auswirkungen auf den demo-link? Wenn Sie auf den ersten beiden Karteireitern der Inhalt springt unten statt schieben den ganzen Weg hinunter. Es ist nicht animieren reibungslos wie sieht es mit der Dritten Registerkarte. Nach dem panel auf der rechten Seite der Seite ist es nicht ziehen Sie heraus, die richtige Höhe zu animieren. Es scheint zu funktionieren nur es einmal aus, es ist animiert, es einmal.
    Versuchen Verkettung von Animationen zusammen, die durch Ihre Rückrufe.
    Ich muss zugeben, dass ich gefunden habe, meine eigene dynamische Lösung jetzt. mizudesign.com/jquery/accordian/basic.html, die behoben werden sollte. Es ist ganz einfach - fügt nur die Höhe mit .css vor dem Versteck der div. Arbeitet ein Genuss 🙂

    InformationsquelleAutor Sampson

  5. 1

    Hatte ich auch ein nerviges slideUp() springen Problem, das auf Safari, aber nicht mit chrome oder IE. Es stellte sich heraus, dass der div-tag war ich versteckt/zeigt, war rechts unten ein weiteres div-tag enthalten float:left divs. Während des Gleitens, die floatenden divs wäre momentan neu gerendert, wodurch das springen.

    Das Update wurde einfach hinzufügen clear:both im Stil der aus - /einblenden div.

    InformationsquelleAutor beaves

  6. 1

    Mein problem ist, dass ich da eine responsive design ich weiß nicht, was die Breite oder die Höhe meinem element sein wird. Nach der Lektüre dieses blog-post http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm erkannte ich, dass jQuery wurde die änderung der position von meinem element zu festen und messing mit dem layout des Elements. Ich habe Folgendes in meine CSS-Datei für das element und nicht bemerken, die schlechte Nebenwirkungen im IE7+, firefox, chrome und safari.

    display: none;  
overflow: hidden;
position: relative !important;

    InformationsquelleAutor Blake Plumb

  7. 1

    Ersetzen margin-top und margin-bottom Werte mit padding-top und padding-bottom Werte hat den trick für mich. Vergessen Sie nicht, um die margin-Wert auf 0 nach.

    InformationsquelleAutor 3rik82

  8. 0

    Dieser arbeitete für mich:

    $(this).pathtoslidingelementhere.width($(this).parent().width());

    InformationsquelleAutor Smirnoff

  9. 0

    Das Problem wird durch IE (quirks-Modus) Rendern "height:0px".

    Fix: Animieren Sie die Höhe auf 1 (nicht 0), dann ausblenden und zurücksetzen Höhe:

    //slideUp for all browsers
$("div").animate({ height:1 },{ complete:function(){
        //hide last pixel and reset height
        $(this).hide().css({ height:"" });
    } 
});

    InformationsquelleAutor sciroccohsd

  10. 0

    Für mich war das problem die margin (oder padding) auf dem div ein - /ausblenden mit Folie, aber ich musste zu geben, margin (oder padding), div. Ich löste mit diesem trick:

      .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }

    InformationsquelleAutor Fred K

Schreibe einen Kommentar