Cómo fundir para mostrar: bloque en línea

98

En mi página tengo un montón (alrededor de 30) nodos dom que deberían agregarse invisibles y se desvanecen cuando están completamente cargados.
Los elementos necesitan una pantalla: estilo de bloque en línea.

Me gustaría usar la función jquery .fadeIn (). Esto requiere que el elemento tenga inicialmente una pantalla: ninguna; regla para ocultarlo inicialmente. Después de fadeIn (), los elementos fuera de curso tienen la pantalla predeterminada: heredar;

¿Cómo puedo utilizar la función de fundido con un valor de visualización que no sea heredar?

jquery fade Boris Callens
fuente

Respuestas:

39

Puede usar la función animada de jQuery para cambiar la opacidad usted mismo, sin afectar la pantalla.

Philnash
fuente
Me gusta más esta solución, mantiene el CSS fuera de mi JS.
Joshuadelange
14
@joshuadelange no realmente, la opacidad también es CSS
Roy
+1 para enfocar el proceso de ingeniería de mostrar / ocultar elementos en dónde debería estar.
klewis
233

$("div").fadeIn().css("display","inline-block");

MakuraYami
fuente
5
Esta es definitivamente la mejor respuesta.
Jason
25
¡Gran respuesta! Aún mejor, puede dejarlo vacío para que el valor predeterminado sea lo que tenga en su CSS:$("div").fadeIn().css("display","");
Brandon Durham
1
Esta debería ser realmente la respuesta aceptada; la respuesta aceptada existente es más un comentario.
Sinister Beard
$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });para asegurarse de que display: inline-block se realiza cuando finaliza el fadein
Simon
no funciona para mí ... aplicado en un div con un estilo de visualización inicial establecido en ninguno usando una clase. Al inspeccionar el elemento, veo que durante algunos milisegundos, justo después de llamar al fadeIn, tiene un bloque en línea en su estilo, luego el estilo se establece en bloquear. con la sugerencia de Simon, el efecto no es agradable, ya que durante el fadeIn el elemento se muestra como un bloque
Giox
11

Solo para desarrollar la buena idea de Phil, aquí hay un fadeIn () que carga fades en cada elemento con la clase .faded a su vez, convertida en animate ():

Antiguo:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

Nuevo:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

Espero que ayude a otro novato de jQuery como yo :) Si hay una mejor manera de hacerlo, ¡díganos!

Simple desarrollo
fuente
9

La respuesta de Makura no funcionó para mí, así que mi solución fue

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hidese aplica inmediatamente, display: nonepero antes de eso, guarda el valor de visualización actual en la caché de datos de jQuery, que será restaurado por las siguientes llamadas de animación.

Así que las divsalidas definidas estáticamente como display: none. Luego se establece inline-blocky se oculta inmediatamente solo para que se desvanezca de nuevo ainline-block

Clodoaldo Neto
fuente
2

De acuerdo con los documentos de jQuery para .show(),

Si un elemento tiene un valor de visualización en línea, luego se oculta y se muestra, se volverá a mostrar en línea.

Entonces, mi solución a este problema fue aplicar una regla CSS a una pantalla de clase: inline-block en el elemento, luego agregué otra clase llamada "ocultar" que aplica display: none; Cuando estaba .show()en el elemento, se mostraba en línea.

amurrell
fuente
Asumiría que esto también debería funcionar cuando configuras #el{display:inline-block;display:none;}y luego ejecutas $('#el').fadeIn();obtienes inline-block. Pero no es así.
Fanky
0

Esto funciona incluso con display:noneajustes preestablecidos por css. Utilizar

$('#element').fadeIn().addClass('displaytype');

(y tambien $('#element').fadeOut().removeClass('displaytype');)

con la configuración en CSS:

#element.displaytype{display:inline-block;}

Considero que esto es una solución alternativa, ya que creo que fadeIn()debería funcionar para que simplemente elimine la última regla, display:nonecuando se establece en, #element{display:inline-block;display:none;}pero no funciona correctamente.

Fanky
fuente