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
la 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

Réponses:

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
la 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
la 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
la 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
la 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