¿Existe una alternativa a fadeOut() que no use display: none para el estilo? Me gustaría utilizar visibilidad oculta para evitar cualquier tipo de cambio en el diseño de página?jQuery fadeOut sin pantalla ninguna?
Puede utilizar .animate() en el opacity directamente:
$(".selector").animate({ opacity: 0 })
De esta manera el elemento sigue ocupando el espacio como desea, sólo tiene una opacidad 0, por lo que es efectivamente el mismo que estar visibility: hidden cuando termina.
animación personalizada es una alternativa
.animate({opacity: 0.0}, 5000, 'linear', callback);
Sí, hay una alternativa. It's called .fadeTo(), donde establece la opacidad del objetivo, que en su caso será 0.
$('element').fadeTo(1000, 0); // fade to "0" with a 1000ms duration
Esto no alterará la propiedad display al final.
Esto no agrega visualización: ninguno cuando se desvanece a 0, pero si se desvanece a un valor superior a 0, entonces fuerza una pantalla: bloque (al menos cuando tiene pantalla: ninguno).Por lo tanto, de hecho altera la propiedad de visualización en ciertas circunstancias. Tuve que usar animate() para evitar esto. – Jens
Pero, ¿qué sucede si quiero ocultar el elemento para que no ocupe el espacio en el documento (como mostrar ninguno). Y todo esto sin configurar la pantalla a ninguno. –
Esto funcionó muy bien, solo tuve que agregar tanto el desvanecimiento para mostrar y desvanecimiento para ocultar. $ ('# msgInfo'). fadeTo (0, 500); $ ('# msgInfo'). FadeTo (2000, 0); –
Una forma de hacer esto es capturar el modo de visualización, entonces .fadeOut, y en el completo, hacer su método preferido de su escondite, y devolver la pantalla a lo que era:
var $element = $('#selector');
var display = $element.css('display');
$element.fadeOut(500, function() {
$element.css('visibility', 'hidden');
$element.css('display', display);
}
Nota que
fadeTo(500, 0) // fade out over half a second
fadeTo(0, 0) // instantly hide
es (extrañamente) no es compatible con
fadeIn()
(cuando se quiere mostrar de nuevo). Así que si usted está utilizando
fadeTo(500, 0)
con el fin de ocultar algo sin el css display: none entonces debe utilizar
fadeTo(500, 1)
a desvanecerse de nuevo en o todavía tendrá opacity: 0 sobrante en el CSS y seguirá siendo invisible.
que desea fadeOut, a continuación, cambiar el contenido y luego fadeIn nuevo:
$("#layer").animate({opacity: 0}, 1000, 'linear', function(){
//Do here any changes to the content (text, colors, etc.)
$("#layer").css('background-color','red'); //For example
$("#layer").animate({opacity: 1}); //FadeIn again
});
¡Gracias! esto realmente me ayuda +1 –
El usuario puede hacer clic en el elemento (* por ejemplo, * un enlace), aunque, en cuyo caso se podría querer establecer 'visibility: hidden;' en la función de devolución de llamada de compleción o algo así. – PleaseStand
Quiero ocultar el elemento sin configurar la pantalla en ninguno. Additinaly No quiero que el elemento mantenga el espacio, parece feo si no hay nada en la página pero el espacio aún está reservado ... –
@ObaidMaroof que es precisamente la pantalla de comportamiento: ninguna es para ... Si estás hablando sobre el hide instantáneo que no quieres, entonces buscas .fadeOut() que muestra: none * después de * a fade. –