Elementos de desvanecimiento dentro y fuera sin cambiar el diseño de la página

Question

El comportamiento normal al usar fadeIn y fadeOut es usar the display property. Sin embargo, esto cambia el diseño de la página.

¿Cómo puedo hacer que fadeIn y fadeOut no modifiquen el diseño de la página?

Answer 1

también

en lugar de .fadeIn() que pueda .animate({opacity:1})
y en lugar de .fadeOut() puedes .animate({opacity:0})

Answer 2

Puede probar esto por fadeOut:

$("something here").fadeOut("slow", function() { 
    $(this).show().css({visibility: "hidden"}); 
}); 

... y esto por fadeIn:

$("something here").hide().css({visibility: "visible"}).fadeIn("slow"); 

Answer 3

Uso fadeTo:

El método .fadeTo() anima la opacidad de los elementos emparejados. Es similar al método .fadeIn() pero ese método muestra el elemento y siempre se desvanece al 100% de opacidad.

Las duraciones se expresan en milisegundos; los valores más altos indican animaciones más lentas, no más rápidas. Las cadenas 'fast' y 'slow' se pueden suministrar para indicar duraciones de 200 y 600 milisegundos, respectivamente. Si se suministra cualquier otra cadena, se utiliza la duración predeterminada de 400 milisegundos. A diferencia de los otros métodos de efectos, .fadeTo() requiere que se especifique explícitamente duration.

Si se suministra, la devolución de llamada se disparó una vez finalizada la animación ...

Answer 4

Gracias a 10gler mi solución a continuación, utilizando la visibilidad para evitar botón invisible clic, etc.

//fadeIn 
$("#x") 
    .css('visibility', 'visible') 
    .fadeTo('fast', 1); 

//fadeOut 
$("#x") 
    .fadeTo('fast', 0, function() { 
     $(this).css('visibility', 'hidden'); 
    }); 

Answer 5

Uso una combinación de las respuestas anteriores, esto funcionó bien para mí. Puede cambiar el tiempo de animación a su gusto.

Para fadeIn:

 $('selector').animate({opacity:1, visibility:'visible'}, 200); 

Para fadeOut:

 $('selector').animate({opacity:0, visibility:'hidden'}, 200); 

Asegúrese de ajustar la visibilty:'hidden' y opacity:0 en el inicio para evitar el estallido repentino en la primera aparición gradual de si la pantalla por defecto es oculto, de lo contrario no debería importar.

 $('selector').css({opacity:0, visibility:'hidden'});