Elemento jQuery hide mientras conserva su espacio en el diseño de página

169

¿Hay alguna manera en jQuery donde pueda ocultar un elemento, pero no cambiar el DOM cuando está oculto? Estoy ocultando un cierto elemento, pero cuando está oculto, los elementos debajo de él se mueven hacia arriba. No quiero que eso suceda. Quiero que el espacio permanezca igual, pero que el elemento se muestre / oculte a voluntad.

¿Puedo hacer esto?

jquery html slandau
fuente
¿qué tal darle ancho cero?
mrtsherman
8
@mrtsherman: se desaconseja el ancho cero: muchos lectores de pantalla (como los que usan los usuarios que son ciegos o que tienen baja visión) seguirán leyendo el contenido que está "oculto" de esta manera, lo que puede confundirlos porque presumiblemente el contenido no lo es. No se supone que esté disponible en este momento. Uso de la visibilidad CSS: oculto es el camino a seguir aquí.
BrendanMcK
Puede guardar la altura dinámicamente antes de fadeIn y fadeOut your elems => ver abajo (lo estoy usando en un bucle de productos). $ ('. Or-woo-bt'). Parent (). Parent (). Parent ( ) .hover (function () {// Preserve space; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Hide; $ (this) .parent ( ) .parent (). find ('a span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ('a span .family-price '). fadeIn (' lento ');});
Olivier

Respuestas:

296

En lugar de hide()usar:

css('visibility','hidden')

hide()establece el displayestilo en none, lo que elimina completamente el elemento del flujo de documentos y hace que no ocupe espacio.

visibility:hidden mantiene el espacio como es

Dr. Molle
fuente
82
css('visibility','visible')
Dr.Molle
1
ocss('visibility', '')
Anthony McGrath el
40

Intente configurar el visibilitya hidden:

$("#id").css("visibility", "hidden");
Chad Levy
fuente
19

display: none;lo sacará del flujo de contenido para que pueda ver su otro contenido moverse en el espacio vacío dejado atrás. (lo display: block;trae de vuelta al flujo empujando todo fuera del camino).

visibility: hidden;lo mantendrá dentro del flujo de contenido ocupando espacio, pero simplemente lo hará invisible. ( visibility: visible;lo revelará nuevamente)

Querrá usarlo visibilitysi desea que su flujo de contenido permanezca sin cambios.

Chispeante
fuente
7

Antes lo usaba opacity: 0antes de ver el visibility: hiddentruco.

Pero en muchos casos opacity: 0es problemático, porque te permite interactuar con el elemento , ¡aunque no puedas verlo! (Como señaló DeadPassive ).

Por lo general, eso no es lo que quieres. ¿Pero quizás ocasionalmente podrías?

joeytwiddle
fuente
1
No puede interactuar con un elemento oculto, mientras que puede hacerlo con un elemento con 0 de opacidad.
DeadPassive
@feskr Si puede pensar en una situación en la que sería ventajoso, ¡comparta!
joeytwiddle
@joeytwiddle Me topé con tu respuesta. Necesitaba evitar la interacción con un elemento en cierto estado, al tiempo que preservaba su espacio. Era consciente del hecho de que la visibilidad: oculta preservaría el espacio, pero no sabía que evitaría la interacción.
feskr