Grundlegende jQuery slideUp und slidedown mich verrückt!

StackOverflow https://stackoverflow.com/questions/1092245

  •  11-09-2019
  •  | 
  •  

Frage

meine jQuery Fähigkeiten sind ziemlich gut normal, aber das ist mir Fahr verrückt!

Es ist eine ziemlich einfache accordian ich von Grund auf neu codiert oben haben. Mit jQuery 1.3.2, so gibt es keine Springen Fehler sein sollte, aber im Grunde, wenn Sie nehmen 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 Text enthält es es ist kürzer, als es ist und Springen denkt. Wenn es ein Bild gibt es kein Problem.

Ich kann nicht herausfinden, wo ich falsch gehe - es ist offensichtlich in den CSS irgendwo, aber ich habe versucht, all die üblichen Verdächtigen wie display: block

würde Irgendwelche Ideen dankbar empfangen!

Mit freundlichen Grüßen, Chris

PS Bitte geben Sie die Art des Quellcodes vergeben, ich habe es herausgerissen das gesamte Projekt arbeite ich an so dass es einige divs enthalten, die nicht wirklich da sein müssen.

War es hilfreich?

Lösung

Sie müssen eine Breite oder Höhe auf den Inhalt für ihn glatt zu animieren.

Andere Tipps

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

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

Es ist wirklich sehr einfach - kommt noch hinzu, die Höhe mit CSS- vor dem div versteckt. Arbeitet ein Genuss:) 

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

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

Ich denke, das Problem ist, dass, wenn padding oder Marge hinzugefügt wird, dann springt er, in diesem Fall von mir war. Sie müssen die Marge in den Rückruf animieren

„im Auge behalten“ auch, dass Tabellen Buggy mit slidedown slideUp verhalten und eher verwenden fadeIn fadeOut

Hier die Höhe, sobald die div seine Animation aus dem Rückruf beendet hat. Es ist möglich, dass Sie die Höhe fühlt, während die div animiert wird, und Sie sind eine Übergangswert bekommen.

Wenn Sie Ihre Animation schreckhaft ist, versuchen Sie die Rückrufe verwenden. Verwenden Sie keine div öffnen und ein div zugleich verbergen. Stattdessen verstecken Sie Ihre erste div, und innerhalb der Callback zeigen Sie Ihre nächste 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/

Ich hatte auch ein lästiges slideUp() Sprung Problem, das auf Safari aufgetreten, aber nicht Chrom oder IE. Es stellte sich heraus, dass die div-Tag war ich versteckt / zeigt rechts unten ein anderes div-Tag war die float:left divs enthalten. Während des Gleitens auf, würden die Floating divs vorübergehend neu gerendert den Sprung zu verursachen.

Das Update wurde einfaches Hinzufügen clear:both, um den Stil des Versteck / div zeigt.

Mein Problem ist, dass, da ich ein Responsive Design habe Ich weiß nicht, was die Breite oder Höhe von meinem Elemente sein wird. Nach der Lektüre dieser Blog-Post http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm erkannte ich, dass jQuery war Änderung der Position meines Elements fest und mit dem Layout des Elements durcheinander. Ich habe folgendes mein CSS für das Element und bemerkte es keine schlechten Nebenwirkungen in IE7 +, Firefox, Chrome und Safari. 

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

Ersetzen margin-top und margin-bottom Werte mit padding-top und padding-bottom Werten haben den Trick für mich. Vergessen Sie nicht, den Randwert auf 0, nachdem diese einzustellen.

Das funktioniert für mich: 

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

Das Problem ist aufgrund IE (Quirks-Modus) versuchen, "height: 0px" zu machen.

Das Update: Animieren Höhe bis 1 (nicht 0), dann verstecken und Reset-Höhe: 

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

Für mich war das Problem der Rand (oder Polsterung) auf der div mit Rutsche / verstecken zu zeigen, aber ich brauchte Marge (oder padding) zu geben, dass div. Ich löste mit diesem Trick: 

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top