elemento de jquery fade no muestra elementos con el estilo 'visibility: hidden'

Tengo un montón de miniaturas que estoy cargando con un estilo de visibility: hidden; para que todas mantengan sus diseños correctos. Una vez que la página está completamente cargada, tengo una función jquery que los desvanece. Esto funcionó cuando su estilo se estableció en display: none;, pero obviamente el diseño se estropeó. ¿Alguna sugerencia?elemento de jquery fade no muestra elementos con el estilo 'visibility: hidden'

Aquí está la línea de fundido:

$('.littleme').fadeIn('slow');

Fuente

2010-03-12 kalpaitch

144

Añadir unas cuantas llamadas a la cadena como esta:

$('.littleme').css('visibility','visible').hide().fadeIn('slow');

Esto lo cambiará a display:none por 1 fotograma antes de desvanecerse, ocupando nuevamente el área.

Fuente

2010-03-12 20:52:09

Cheers funciona bien. Sin demora o cambio notable en ese 1 fotograma. – kalpaitch

y viceversa: '$ ('. Littleme'). FadeOut (velocidad, función() {$ ('. Littleme'). Css (" visibilidad "," oculto "). Css (" display "," ") ;}); ':-) – eruciform

@eruciform - para eliminar' display: none' al final, puedes hacer '$ ('. Littleme'). FadeTo (velocidad, 0);', que no set 'display' al final, mismo efecto con menos trabajo :) –

tratar de usar la opacidad y animate():

$('.littleme').css('opacity',0).animate({opacity:1}, 1000);

Fuente

2010-03-12 20:51:52 David

Siempre estoy un poco cansado de usar opacidad con respecto a CSS debido a IE. Presumiblemente jquery maneja esto sin problemas ??? – kalpaitch

Esto no funcionará porque aún no está visible, prueba para verlo por ti mismo. –

por supuesto, debes eliminar la visibilidad: oculta. Y sí, jQuery maneja el problema de opacidad en IE. – David

Intenta hacer coincidir para el elemento oculto?

$ (". Littleme: hidden"). FadeIn();

Fuente

2010-03-12 20:56:39 iivel

¿No puedes usar fadeTo (duración, valor) en su lugar? Sin duda, esta forma puede desaparecer en 0 y 1, de esa manera no están afectando el flujo de documentos ...

Fuente

2012-01-05 15:44:20 Neil

<span style="opacity:0;">I'm Hidden</span>

para poder apreciar: $('span').fadeTo(1000,1)

Para ocultar : $('span').fadeTo(1000,0)

El espacio se conserva en el diseño DOM

http://jsfiddle.net/VZwq6/

Fuente

2014-03-19 12:10:58 Medorator

Dado que la opacidad no es compatible con IE <9 y quiero comenzar con un estado invisible, he acoplado esta solución con https://github.com/bladeSk/internet-explorer-opacity- polyfill –

elemento de jquery fade no muestra elementos con el estilo 'visibility: hidden'

Respuesta

Cuestiones relacionadas