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

Question

Verzeih mir, wenn dies vorher angesprochen wurde, konnte nichts finden.

Ich bin Animieren einen Gehalt bar, dass Kinder absolut außerhalb positionieren (über negative Margen) hat. Die Idee ist, dass die Kinder mit der Bar animieren wird, wie es dehnt sich aus.

Was passiert ist, sobald die Animation der Kinder beginnt verschwinden und dann wieder auftauchen, wenn die Animation abgeschlossen ist. Es ist, als ob die Animation beenden müssen, bevor der Browser weiß, wo die Kinder setzen.

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

Was geschieht eigentlich? Was sind meine Optionen, dies zu umgehen?

Vielen Dank im Voraus,

Belinda

Answer 1

Wenn jquery entweder die Höhe oder Breite eines Elements Animieren, wird es overflow: hidden auf das Element automatisch eingestellt, während die Animation geschieht. Da Ihr Kind-Element außerhalb positioniert ist, dann ist es technisch Teil des Überlaufs. Der Kommentar in der jquery Quelle in der Nähe des Code, der dies tut, sagt „// Stellen Sie sicher, dass nichts schleicht aus.“ Wenn Sie die unkomprimierte jquery Quelle umfassen und kommentieren Sie Zeile 4032 von jquery-1.3.2.js (im animate Funktion):

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

Sie werden sehen, dass die Animation die Art und Weise funktioniert, wie Sie gedacht. Ich bin nicht sicher von einer Vermeidung des Problems anders als die jquery Quelle Modifizieren von oben die Zeile auskommentieren.

Answer 2

Wie von jQuery 1.4.3 gibt es eine andere Lösung, die nicht jQuery Modifizierung erfordert. Wenn Sie den ‚Überlauf‘ Stil des Elements, das Sie als Inline-Stil animieren, bevor die Animation startet, dann wird jQuery nicht den ‚Überlauf‘ Stil versteckt gesetzt. 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 3

Nun - es scheint, dass es sich um eine Funktion des Browsers oder jQuery ist, nicht unbedingt so, wie Sie Ihre HTML oder Javascript aufgebaut haben. Ich sage das, weil es nur die Pixelfläche in dem Begrenzungsrahmen des DOM-Elements scheint scheint zu erbringenden (versuchen, den Text zu bewegen, so dass die Hälfte des Textes außerhalb ist und die andere Hälfte im Innern ... Sie sehen ein „abgeschnitten“ Stück von Text, wie er beseelt.)

Hier ist also die Arbeit um: Es verwendet einen Wrapper DIV um „#box“ und „#outside“, so dass beide innerhalb der Begrenzungsrahmen des Wrapper

.

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 die 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 4

Alternativ können Sie Ihre Präferenz angeben, dass das Element mit Hilfe der visible Spezifikation !important bleiben.

#box {
  overflow: visible !important;
}