not - jquery fadetoggle

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

Question

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 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 visualización predeterminada: inherit;

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

Answer 1

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

Si un elemento tiene un valor de visualización de en línea, luego está oculto y se muestra, se mostrará una vez más 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 2

Esto funciona incluso con la display:none preestablecido por css. Utilizar

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

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

con la configuración en CSS:

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

Considero que esto es una solución ya que creo que fadeIn() debería funcionar para que simplemente elimine la última regla: display:none cuando se establece en #element{display:inline-block;display:none;} pero está eliminando mal ambos.

Answer 3

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();

hide inmediatamente aplica display: none pero antes guarda el valor de visualización actual en el caché de datos de jQuery que será restaurado por las siguientes llamadas de animación.

Entonces el div comienza estáticamente definido como display: none . Luego está configurado inline-block en inline-block e inmediatamente oculto para ser desvanecido de nuevo inline-block en inline-block

Answer 4

Para dar cuerpo a la buena idea de Phil, he aquí un fadeIn () que carga los fundidos en cada elemento con la clase .faded alternadamente, 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 ayudes a otro jQuery newb como yo :) Si hay una mejor manera de hacerlo, ¡cuéntanos!

Answer 5

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

Answer 6

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