jQuery - Anima elemento che ha figli con posizionamento assoluto di fuori di esso - lampeggiante

Question

Perdonami se questo è stato affrontato prima, non riusciva a trovare nulla.

Sto animare un bar contenuto che ha i bambini con posizionamento assoluto di fuori di esso (via margini negativi). L'idea è che i bambini animeranno con la barra mentre si espande.

Quello che succede è non appena l'animazione inizia i bambini scompaiono, per poi riapparire quando l'animazione è completa. E 'come se l'animazione è necessario completare prima che il browser sa dove mettere i bambini.

Ho caricato davvero un semplice esempio qui, tutti gli script inclusi a pagina: http://www.ismailshallis.com/jdemo/

Che cosa sta realmente accadendo? Quali sono le opzioni per risolvere questo?

Grazie in anticipo,

Belinda

Answer 1

Quando jQuery sta animando l'altezza o la larghezza di un elemento, verrà impostato automaticamente overflow: hidden sull'elemento mentre l'animazione sta accadendo. Dal momento che il vostro elemento figlio è posizionato al di fuori, è tecnicamente parte del troppo pieno. Il commento nel codice jQuery vicino al codice che fa questo dice "// Assicurarsi che nulla sguscia fuori." Se si include la sorgente di jQuery non compresso e il commento fuori la linea 4032 di jQuery-1.3.2.js (all'interno della funzione animate):

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

Si vedrà che l'animazione funziona nel modo desiderato. Non sono sicuro di una soluzione diversa modificando la fonte jquery commentando quella linea sopra.

Answer 2

Al jQuery 1.4.3 esiste un'altra soluzione che non richiede la modifica jQuery. Se si imposta lo stile 'troppo pieno' dell'elemento che si sta animando come uno stile in linea prima di iniziare l'animazione poi jQuery non impostare lo stile 'troppo pieno' di nascosto. Ad esempio:

<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

Bene - sembra che si tratta di una funzione del browser o jQuery, non necessariamente il modo che hai costruito il codice HTML o Javascript. Dico questo perché mi sembra solo l'area di pixel nel rettangolo di selezione dell'elemento DOM sembra essere reso (provare a spostare il testo in modo che la metà del testo è al di fuori, e per metà dentro ... si vede un "cut off" pezzo di testo nella sua anima.)

Quindi, ecco il lavoro intorno: Esso utilizza un DIV wrapper "#box" e "#outside" in modo tale che entrambi sono dentro il rettangolo di selezione del involucro

.

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; }

E il codice HTML:

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

E il 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

In alternativa, è possibile indicare la vostra preferenza che l'elemento rimane visible utilizzando la specifica !important.

#box {
  overflow: visible !important;
}