jQuery .animate() fuerzas estilo "desbordamiento: oculto"

Question

jQuery's .animate() fuerza el estilo overflow: hidden cuando se activa, jugando con mi elemento animado porque tengo otro elemento que cuelga, con posición negativa, fuera de él. ¿Hay alguna manera de evitar eso?

Answer 1

Este es el código fuente:

if (isElement && (p === "height" || p === "width")) { 
    // Make sure that nothing sneaks out 
    // Record all 3 overflow attributes because IE does not 
    // change the overflow attribute when overflowX and 
    // overflowY are set to the same value 
    opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ]; 
    ... 
    ... 
    ... 
    } 

if (opt.overflow != null) { 
    this.style.overflow = "hidden"; 
} 

Puede comentar esto si lo desea, o simplemente utilizar $('element').animate().css('overflow', 'visible'); sugirió anteriormente.

La razón por la que el desbordamiento está configurado como oculto es para que los elementos dentro del animado estén contenidos dentro del elemento mientras se está animando. Por ejemplo, si reduces el ancho de un elemento, su contenido podría intentar alargarse y "caer" por la parte inferior.

Esto se explica en el código fuente de arriba por el comentario:

// Asegúrese de que nada se escapa

esperanza que explica por usted.

Answer 2

Otra forma es declarar el elemento como ! Important in css.

Por ejemplo.

.somediv { 
    overflow: visible !important; 
} 

Answer 3

Puede pasar:

function(e){$('#something').css('overflowY', 'scroll');}

a la .animate() Parámetro de opciones, en función a ejecutar cuando la animación es 'completo', así:

$('#something').animate({ 
        width: '100px', 
        height: '100px', 
        overflowY: 'scroll !important' //doesn't work 
       }, { duration: 500, queue: false, complete: function(e){$('#something').css('overflowY', 'scroll');} }); 

Answer 4

Cualquiera de esas soluciones funcionó para mí, pero encontré el truco:

$(myDiv).animate(
    { height: newHeight}, 
    { duration: 500, 
    queue: false, 
    easing: 'easeOutExpo', 

    step: function() { 
     $(myDiv).css("overflow","visible"); 
    } 
    } 
); 

Fuerce el CSS en cada paso de la animación. Espero eso ayude.

Answer 5

PERFECTO "Eagle" (2 publicaciones). Si no me topé con su respuesta, habría estado buscando horas para esto, apuesto.

"Eagle" publicó la forma correcta de hacerlo.

Todas las otras soluciones son solo hacks. Esta fue la forma correcta (reiterando), es por eso que le dan todas las opciones cuando usa la clase "animar".

A continuación se detallan algunos de los ajustes disponibles (de la documentación, https://api.jquery.com/animate/). Necesitaba la configuración "completa" para realizar una acción cuando finalizó la animación.

duration (default: 400) 
    easing (default: swing) 
    queue (default: true) 
    specialEasing 
    step 
    progress 
    complete 
    start 
    done 
    fail 
    always 

Esto va a hacer que el trabajo con animaciones mucho más fácil y que va a utilizar este formato si es o no es necesaria, para todas las animaciones en el futuro.

Answer 6

Mi respuesta preferida es usar $.Animation.prefilter. Here is a jsfiddle.net example.

Configurar el filtro previo:

jQuery.Animation.prefilter(function(element, properties, options) { 
    if (options.overrideOverflow) { 
    jQuery(element).css("overflow", options.overrideOverflow); 
    } 
}); 

luego usarlo

$(myDiv).animate(
    { height: newHeight}, 
    { 
    duration: 500, 
    overrideOverflow: "visible" // Replace "visible" with your desired overflow value 
    } 
); 

Tenga en cuenta que no puede utilizar el nombre de la opción overflow porque jQuery utiliza ese internamente.

Aunque esta característica ha existido en jQuery por un tiempo, parece que la documentación no está completa. Pero draft documentation is available.

Véase también https://github.com/jquery/api.jquery.com/issues/256

Answer 7

Al utilizar $('element').animate().css('overflow', 'visible'); que puede causar problemas si overflow-x y overflow-y ya se han especificado para el elemento.

En esos casos, use $('element').animate().css('overflow', ''); que simplemente elimina el atributo de desbordamiento y mantiene intactos el overflow-x y el overflow-y.