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

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