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

Question

En mi página tengo un montón (unos 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 utilizar la función jquery .fadeIn(). Esto requiere que el elemento inicialmente tenga una pantalla: ninguno; regla para ocultarlo inicialmente. Después de fadeIn() los elementos fuera de curso tienen la pantalla predeterminada: heredar;

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

Answer 1

Puede utilizar la función animate de jQuery para cambiar la opacidad usted mismo, sin afectar la visualización.

Answer 2

Sólo para dar cuerpo a buena idea de Phil, aquí es un fadeIn() que las cargas se desvanece en cada elemento con la clase .faded a su vez, se convirtió al animar():

antigua:

$(".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); 
}); 

esperanza de que ayudar a otro Novato jQuery como yo :) Si hay una mejor manera de hacer eso, por favor díganos!

Answer 3

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

Answer 4

Según la jQuery docs para .show(),

Si un elemento tiene un valor de visualización de línea, a continuación, se oculta y se muestra, una vez más se muestra en línea.

Así que 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 "hide" que aplica display: none; Cuando I .show() en el elemento, se muestra en línea.

Answer 5

respuesta de makura no funcionó para mí, así que mi solución era

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

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

hide aplica inmediatamente display: none pero antes de que se guarda el valor actual de la pantalla en la caché de datos de jQuery que será restaurada por las llamadas de animación posteriores.

Por lo tanto, el div comienza estáticamente definido como display: none. Luego se establece en inline-block y se oculta inmediatamente para desvanecerse en inline-block

Answer 6

Esto funciona incluso con display:none preestablecido por css.Utilice

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

(y también $('#element').fadeOut().removeClass('displaytype');)

con la configuración de CSS:

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

considero esto una solución, ya que creo fadeIn() deben trabajar para que fuera simplemente eliminar la última regla - display:none cuando se establece en #element{display:inline-block;display:none;} pero está eliminando mal ambos.