Elemento oculto jQuery, preservando seu espaço no layout da página

169

Existe uma maneira no jQuery em que eu possa ocultar um elemento, mas não alterar o DOM quando ele estiver oculto? Estou ocultando um determinado elemento, mas quando está oculto, os elementos abaixo dele se movem para cima. Eu não quero que isso aconteça. Quero que o espaço permaneça o mesmo, mas o elemento seja mostrado / oculto à vontade.

Posso fazer isso?

jquery html slandau
fonte
que tal dar largura zero?
mrtsherman
8
@mrtsherman: a largura zero é desencorajada: muitos leitores de tela (usados ​​por usuários cegos ou com baixa visão) ainda leem o conteúdo 'escondido' dessa maneira, o que pode confundi-los, pois provavelmente o conteúdo não é ' não deveria estar disponível neste momento. Usando CSS visibilidade: oculto é o caminho a percorrer aqui.
BrendanMcK
Você pode salvar a altura dinamicamente antes de fadeIn e fadeOut seus elementos => ver embaixo (estou usando-a em um loop de produtos.) $ ('. Or-woo-bt'). Parent (). Parent (). Parent ( ) .hover (function () {// Preservar espaço; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Ocultar; $ (this) .parent ( ) .parent (). find ('a span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ('uma extensão .family-price '). fadeIn (' slow ');});
Olivier

Respostas:

296

Em vez de hide(), use:

css('visibility','hidden')

hide()define o displayestilo como none, que remove completamente o elemento do fluxo de documentos e faz com que não ocupe espaço.

visibility:hidden mantém o espaço como está.

Dr.Molle
fonte
82
css('visibility','visible')
Dr.Molle
1
oucss('visibility', '')
Anthony McGrath
40

Tente configurar visibilitypara hidden:

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

display: none;o retirará do fluxo de conteúdo, para que você veja seu outro conteúdo se mover para o espaço vazio deixado para trás. ( display: block;traz de volta ao fluxo, empurrando tudo para fora do caminho.)

visibility: hidden;irá mantê-lo dentro do fluxo de conteúdo, ocupando espaço, mas simplesmente tornando-o invisível. ( visibility: visible;irá revelá-lo novamente.)

Você vai querer usar visibilityse quiser que seu fluxo de conteúdo permaneça inalterado.

Sparky
fonte
15

em outra resposta, note-se que o jQuery fadeTonão está definido display:nonepara conclusão, portanto, também pode fornecer uma solução aqui, em vez de usar, fadeOutpor exemplo:

jQuery, oculte uma div sem perturbar o resto da página

Lunelson
fonte
7

Eu usei anteriormente opacity: 0antes de ver o visibility: hiddentruque.

Mas, em muitos casos, opacity: 0é problemático, porque permite que você interaja com o elemento , mesmo que não possa vê-lo! (Como indicado por DeadPassive .)

Geralmente não é isso que você deseja. Mas talvez ocasionalmente você possa?

joeytwiddle
fonte
1
Você não pode interagir com um elemento oculto, enquanto pode com um elemento com 0 opacidade.
precisa saber é o seguinte
@feskr Se você puder pensar em uma situação em que seria vantajosa, compartilhe!
Joeytwiddle 12/02/16
@joeytwiddle deparei com você responder. Eu precisava impedir a interação com um elemento em um determinado estado, preservando seu espaço. Eu estava ciente do fato de que a visibilidade: hidden preservaria o espaço, mas não sabia que impediria a interação.
feskr 17/02