jQuery - elemento que tiene hijos con posición absoluta fuera de ella Animate - parpadeante

Question

Perdóname si esto ha sido abordado antes, no hemos podido encontrar nada.

Estoy Animación de una barra de contenido que los niños que tiene posición absoluta fuera de ella (a través de los márgenes negativos). La idea es que los niños van a animar con la barra de medida que se expande.

Lo que sucede es tan pronto como la animación se inicia a los niños desaparecen y luego vuelven a aparecer cuando la animación se ha completado. Es como si la animación necesita para completar antes de que el navegador sabe dónde poner los niños.

He subido un ejemplo muy simple aquí, todos los scripts incluidos en la página: http://www.ismailshallis.com/jdemo/

Lo que está sucediendo? ¿Cuáles son mis opciones para trabajar alrededor de esto?

Muchas gracias de antemano,

Belinda

Answer 1

Cuando jquery está animando o bien la altura o ancho de un elemento, se establecerá automáticamente overflow: hidden sobre el elemento, mientras que la animación está sucediendo. Debido a que su elemento secundario se coloca fuera, es técnicamente parte del desbordamiento. El comentario en la fuente jQuery cerca del código que hace esto dice "// Asegúrese de que nada se escapa." Si se incluye la fuente de jQuery sin comprimir y en comentario la línea 4032 de jquery-1.3.2.js (dentro de la función animate):

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

Usted verá que la animación funciona de la manera que quería. No estoy seguro de una solución que no sea la modificación de la fuente jQuery comentando que la línea anterior.

Answer 2

A partir de jQuery 1.4.3 hay otra solución que no requiere la modificación de jQuery. Si se establece el estilo 'desbordamiento' del elemento que se está animando como un estilo en línea antes de iniciar la animación jQuery entonces no establecer el estilo de 'desbordamiento' de oculto. Por ejemplo:

<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

Bien - parece que es una función del navegador o jQuery, no necesariamente de la forma en que has construido tu HTML o Javascript. Digo esto porque parece que sólo el área de píxeles dentro del cuadro delimitador del elemento DOM parece ser prestados (trate de mover el texto, de modo que la mitad del texto está fuera, y la otra mitad en el interior ... que vea un "cortado" pieza de texto, ya que anima.)

Así que aquí está el trabajo en torno a: Utiliza un DIV contenedor alrededor de "#box" y "#outside" de manera que ambos se encuentran dentro del cuadro delimitador de la envoltura

.

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

Y el código HTML:

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

Y el 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

Como alternativa, puede indicar su preferencia de que el elemento permanezca visible mediante el uso de la especificación !important.

#box {
  overflow: visible !important;
}