jQuery - Elemento animado que tiene niños completamente posicionados fuera de él - parpadeando

Question

Perdóneme si esto ha sido tratado anteriormente, no pude encontrar nada.

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

Lo que sucede es que tan pronto como comienza la animación los niños desaparecen, y luego reaparecen cuando la animación se completa. Es como si la animación tuviera que completarse antes de que el navegador sepa dónde colocar a los niños.

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

Qué está sucediendo realmente? ¿Cuáles son mis opciones para solucionar esto?

Muchas gracias de antemano,

Belinda

Answer 1

Cuando jQuery es la animación de la altura o ancho de un elemento, éste establecerá de forma automática en el elemento overflow: hidden mientras que la animación está sucediendo. Como su elemento hijo está posicionado afuera, 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 escabulle". 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 alternativa a la modificación de la fuente jquery comentando la línea anterior.

Answer 2

Bueno, parece que es una función del navegador o jQuery, no necesariamente de la forma en que ha construido su HTML o Javascript. Digo esto porque parece que solo se representa el área de píxeles dentro del cuadro delimitador del elemento DOM (intente mover el texto de modo que la mitad del texto esté afuera y la mitad adentro ... verá una pieza "cortada" de texto como se anima.)

Así que aquí está el trabajo: Utiliza un envoltorio DIV alrededor de "# box" y "# outside", de modo que ambos están 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 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 3

A partir de jQuery 1.4.3 hay otra solución que no requiere la modificación jQuery. Si configura el estilo 'overflow' del elemento que está animando como un estilo en línea antes de comenzar la animación, jQuery no configurará el estilo 'overflow' como 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 4

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

#box { 
    overflow: visible !important; 
}