jQuery - fundido de entrada/salida de elementos conservando el diseño de flujo

Question

Tengo una lista de elementos en mi aplicación web; cada uno de estos tiene un conjunto de botones de comando dispuestos debajo.

Para mantener limpia la interfaz, estos botones solo se muestran al pasar el mouse por encima del elemento. Los botones están envueltos en una etiqueta que tiene el atributo siguiente CSS: visibility: hidden

Esto preserva el diseño - de manera que los elementos de la lista no saltan alrededor como los botones se revelan.

Lo que quiero hacer es atenuar los botones de entrada/salida usando jQuery. Sin embargo, los métodos predeterminados (fadeIn(), fadeOut()) parecen usar display: none, que elimina los botones del flujo.

Lo que necesito es una forma de atenuarlas usando el atributo visibility. Entonces, antes de embarcarme en una búsqueda, ¿alguien sabe de una manera obvia de hacer esto que me estoy perdiendo?

Saludos

Answer 1

Crea DIV de contenedor vacío (con las dimensiones especificadas) para los elementos que se están desvaneciendo. Fundir lo que hay adentro. Alternativamente, puede desvanecerse al 1%, por lo que aún ocupará espacio, pero será apenas visible.

Answer 2

parece que $ (this) .fadeTo ("lento", 0); debería hacerlo, los documentos no dicen nada sobre la configuración de visualización. Solo fadeOut() tiene la pantalla: ninguno; establecido en los documentos, pero dame un momento y lo probaré.

Answer 3

rodar su propia desvanecimiento, así:

$(this).animate({opacity: "0.0"});