jQuery masque l'élément tout en préservant son espace dans la mise en page

169

Y a-t-il un moyen dans jQuery où je peux cacher un élément, mais pas changer le DOM lorsqu'il est caché? Je cache un certain élément mais quand il est caché, les éléments en dessous montent. Je ne veux pas que ça arrive. Je veux que l'espace reste le même, mais que l'élément soit affiché / masqué à volonté.

Puis-je faire ceci?

jquery html

— slandau
source

que diriez-vous de lui donner une largeur nulle?

— mrtsherman

8

@mrtsherman: la largeur zéro est déconseillée: de nombreux lecteurs d'écran (tels qu'utilisés par les utilisateurs aveugles ou malvoyants) liront toujours le contenu `` caché '' de cette manière, ce qui peut les confondre car vraisemblablement le contenu n'est pas '' t censé être disponible à ce stade. Utiliser la visibilité css: caché est la voie à suivre ici.

— BrendanMcK

Vous pouvez enregistrer la hauteur dynamiquement avant fadeIn et fadeOut your elems => voir en bas (je l'utilise dans une boucle de produits.) $ ('. Or-woo-bt'). Parent (). Parent (). Parent ( ) .hover (function () {// Préserver l'espace; 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 (' slow ');});

— Olivier

296

Au lieu de hide(), utilisez:

css('visibility','hidden')

hide()définit le displaystyle sur none, ce qui supprime complètement l'élément du flux de documents et l'empêche de prendre de l'espace.

visibility:hidden garde l'espace tel qu'il est.

— Dr Molle
source

82

css('visibility','visible')

— Dr Molle

1

oucss('visibility', '')

— Anthony McGrath

40

Essayez de définir le visibilitysur hidden:

$("#id").css("visibility", "hidden");

— Chad Levy
source

19

display: none;le sortira du flux de contenu afin que vous puissiez voir votre autre contenu se déplacer dans l'espace vide laissé derrière. (le display: block;ramène dans le flux en poussant tout hors du chemin.)

visibility: hidden;le maintiendra dans le flux de contenu en prenant de l'espace mais le rendra simplement invisible. ( visibility: visible;le révélera à nouveau.)

Vous voudrez l'utiliser visibilitysi vous souhaitez que votre flux de contenu reste inchangé.

— Sparky
source

15

dans une autre réponse, il est noté que jQuery fadeTon'est pas défini display:noneà la fin et pourrait donc également fournir une solution ici, plutôt que d'utiliser fadeOutpar exemple:

jQuery, cachez un div sans déranger le reste de la page

— Lunelson
source

7

J'utilisais auparavant opacity: 0avant de voir le visibility: hiddentruc.

Mais dans de nombreux cas opacity: 0, cela pose problème, car cela vous permet d'interagir avec l'élément , même si vous ne pouvez pas le voir! (Comme l'a souligné DeadPassive .)

Ce n'est généralement pas ce que vous voulez. Mais peut-être que vous le pourriez parfois?

— joeytwiddle
source

1

Vous ne pouvez pas interagir avec un élément masqué, contrairement à un élément avec une opacité de 0.

— DeadPassive

@feskr Si vous pensez à une situation où cela serait avantageux, partagez!

— joeytwiddle

@joeytwiddle Je suis tombé sur votre réponse. J'avais besoin d'empêcher l'interaction avec un élément dans un certain état, tout en préservant son espace. J'étais conscient du fait que la visibilité: cachée préserverait l'espace, mais je ne savais pas qu'elle empêcherait l'interaction.

— feskr