jQuery - Animieren Element, das Kinder absolut außerhalb davon positioniert hat - blinkt

Question

Verzeihen Sie mir, wenn dies zuvor angesprochen wurde, konnte nichts finden.

Ich animiere eine Inhaltsleiste, die Kinder absolut außerhalb positioniert hat (über negative Ränder). Die Idee ist, dass die Kinder mit der Stange animieren, wenn sie sich ausdehnt.

Was passiert, sobald die Animation beginnt, verschwinden die Kinder und erscheinen dann wieder, wenn die Animation abgeschlossen ist. Es ist, als ob die Animation abgeschlossen werden muss, bevor der Browser weiß, wo die Kinder platziert werden sollen.

Ich habe ein wirklich einfaches Beispiel hier hochgeladen, alle Skripte auf Seite enthalten: http://www.ismailshallis.com/jdemo/

Was tatsächlich passiert ist? Was sind meine Möglichkeiten, um dies zu umgehen?

Vielen Dank im Voraus,

Belinda

Answer 1

Wenn jquery entweder die Höhe oder Breite eines Elements ist belebend, wird es automatisch overflow: hidden auf das Element, während die Animation geschieht. Da Ihr Kindelement außerhalb positioniert ist, ist es technisch Teil des Überlaufs. Der Kommentar in der jQuery-Quelle in der Nähe des Codes, der dies sagt, sagt: "// Achte darauf, dass nichts herausrutscht." Wenn Sie die unkomprimierte jquery Quelle und kommentieren Sie Zeile 4032 von jquery-1.3.2.js (innerhalb der animate Funktion) schließen ein:

//this.style.overflow = "hidden"; 

Sie werden sehen, dass die Animation die Art und Weise funktioniert, wie Sie gedacht. Ich bin mir einer anderen Möglichkeit nicht sicher, als die jquery-Quelle zu modifizieren, indem ich die Zeile oben auskommentiere.

Answer 2

Nun - es scheint, dass es eine Funktion des Browsers oder jQuery ist, nicht unbedingt von der Art, wie Sie Ihre HTML oder Javascript erstellt haben. Ich sage das, weil scheinbar nur der Pixelbereich innerhalb des Begrenzungsrahmens des DOM-Elements gerendert wird (versuche, den Text so zu verschieben, dass die Hälfte des Textes außen und halb innen liegt ... du siehst ein "abgeschnittenes" Stück von Text, wie es animiert.)

Also hier ist die Arbeit um: Es verwendet einen Wrapper DIV um "#box" und "#outside", so dass beide in der Begrenzungsbox des Wrappers sind.

CSS:

#boxWrapper { 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     width: 200px; 
     height: 200px; 
     margin-left: -100px; 
     margin-top: -120px; /* extra 20px for the #outside */ 
     background:#ccc; 
    } 

    #box { 
     background: #000; 
     height:100%; 
     width:100%; 
     margin-top:20px; /* give 20px for the #outside */ 
    } 

    #outside { 
     background:darkblue; 
     position: absolute; 
     top: 0px; 
     right: 0; } 

Und der HTML:

<div id="boxWrapper"> 
    <div id="box"> 
     <a href="#">CLICK ME</a> 
     <div id="outside"> 
      I'm positioned OUTSIDE the box 
     </div> 
    </div> 
</div> 

Und das Javascript:

<script type="text/javascript"> 
    $(document).ready(function() { 

      $("#box a").click(function(){ 
       $("#boxWrapper").animate({ 
         height: "410px", 
         opacity: 0.9, 
         top: "25%" 
         }, 1000); 
       return false; 
      }); 
     }); 

</script> 

Answer 3

Ab jQuery 1.4.3 gibt es eine andere Lösung, die nicht erfordert Modifizierung jQuery. Wenn Sie den Überlaufstil des Elements, das Sie animieren, als Inline-Stil festlegen, bevor Sie die Animation starten, wird jQuery den Überlauf-Stil nicht auf ausgeblendet setzen. Zum Beispiel:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#box a").click(function() { 
      $("#box") 

      // Prevents absolutely positioned elements from getting clipped. 
      .css('overflow', 'visible') 

      .animate({ 
       height: "410px" 
      }) 

      // Reset the 'overflow' style. You could also put this in the 
      // animate() callback. 
      .css('overflow', ''); 
     }); 
    }); 
</script> 

Answer 4

Alternativ können Sie Ihre Präferenz angeben, dass das Element bleiben visible durch die !important Spezifikation verwenden.

#box { 
    overflow: visible !important; 
}