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?jQuery .animate() fuerzas estilo "desbordamiento: oculto"
Respuesta
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.
Excelente explicación. – pilau
Otra forma es declarar el elemento como ! Important in css.
Por ejemplo.
.somediv {
overflow: visible !important;
}
@ScottGreenfield No está en Chrome 17.0 – Sawny
@ScottGreenfield - eso no es correcto. ! importante tiene prioridad sobre los estilos en línea. –
http://www.w3.org/TR/CSS2/cascade.html#cascading-order Autor declaraciones de estilo importantes sobre las normales, independientemente de la especificidad, los estilos en línea tienen la mayor especificidad, pero no tienen prioridad sobre los estilos declarados importante. –
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');} });
¿Cómo sería útil? La ocultación tiene lugar * durante * la animación, no * después de * it. – pilau
Tengo que decir que esta solución me ayudó mejor. Me permitió mantener el rollo después de la animación, acabo de agregar lo mismo en la animación para que el rollo siempre esté allí. ¡Gracias! – G4bri3l
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.
¡Perfecto! Esto es exactamente lo que necesitaba, gracias. –
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.
Esa no es una respuesta. Publicarlo como comentario! Sin embargo, la respuesta que mencionaste es la mejor truco en mis ojos. Agregue desbordamiento: visible en cada paso de la animación que no es completamente necesario porque solo tiene que establecer una vez. Furtermore jquery está eliminando el desbordamiento: se oculta cuando termina la animación, por lo que no tiene que hacer eso usted mismo. – Fuzzyma
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
Este es un enfoque ordenado. No había llegado a los métodos disponibles en el objeto jQuery.Animation mucho. Gracias por mencionarlo. –
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
.
- 1. Desbordamiento de anulación: oculto
- 2. Posición absoluta y desbordamiento oculto
- 3. jQuery animate scrollTop
- 4. Sepa qué desbordamiento: oculto ha ocultado
- 5. Animate PNGs with jQuery?
- 6. Cómo bucle .animate JQuery
- 7. jQuery .animate() Problemas
- 8. jQuery animate .prepend
- 9. Jquery animate bottom problema
- 10. Desbordamiento-x: oculto no funciona en Chrome
- 11. divs en línea con desbordamiento oculto
- 12. centro imagen en div con desbordamiento oculto
- 13. Jquery animate() y google chrome issues
- 14. jQuery: Animate Margins to Auto?
- 15. jQuery Animate relleno a cero
- 16. navegadores cruzados jquery animate scrollTop
- 17. jQuery - Animate css background-size?
- 18. Animate cosas como en jQuery?
- 19. Ignorar la regla CSS principal de 'desbordamiento: oculto'
- 20. Problema oculto de desbordamiento de cuerpo en Internet Explorer 7
- 21. CSS/JavaScript - contenido fuera de un elemento con desbordamiento: oculto
- 22. fuerzas OAuth2Decorator oauth_aware autenticación
- 23. Jquery - Cómo detectar si los elementos se ocultan por un desbordamiento: oculto; ¿envase?
- 24. ActionBarSherlock menú de desbordamiento cuestión de estilo
- 25. Desbordamiento: oculto para bordes redondeados usando css3pie en IE8?
- 26. Desbordamiento: oculto no funciona en el correo electrónico
- 27. Desbordamiento de CSS oculto con la posición absoluta
- 28. desbordamiento: oculto; no funciona en Chrome con IFRAME?
- 29. border-radius; desbordamiento: oculto, y el texto no está recortado
- 30. desbordamiento: oculto; causando problemas de alineación en firefox
puede usar $ ('element'). Animate(). Css ('overflow', 'visible'); para algunas pruebas, ¿puedes publicar algún código? – Tim
Esto funciona, porque .animate() establece el desbordamiento solo una vez cuando se inicia. gracias =) – PulledBull
Mismo problema, hacl – Moak