¿Por qué jQuery show / hide usa display: none en lugar de visibility: hidden?


display:none significa que el elemento no se representa como parte del DOM, por lo que no se carga hasta que la propiedad display cambie a otra cosa.

visibility:hidden carga el elemento, pero no lo demuestra.

¿Por qué jQuery usa display:none para sus funciones mostrar/ocultar en lugar de cambiar entre visibility:hidden y visibility:visible?

Author: isayno, 2009-07-21

5 answers

Porque en display:none, el elemento, a todos los efectos, deja de existir't no ocupa ningún espacio. Sin embargo, en visibility:hidden, es como si acabaras de agregar opacity:0 al elemento occupies ocupa la misma cantidad de espacio pero simplemente actúa invisible.

Los creadores de jQuery probablemente pensaron que el primero sería mejor para .hide().

 65
Author: Salty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-11 04:49:17

visibility: hidden hace que un elemento sea invisible, pero no lo elimina del diseño de la página. Deja una caja vacía donde estaba el elemento. display: none lo elimina del diseño para que no ocupe ningún espacio en la página, que suele ser lo que la gente quiere cuando oculta algo.

 18
Author: John Kugelman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-10 12:27:29

Visibilidad:oculto hace que el elemento invisible de una manera que todavía utiliza el espacio en la página. Display: ninguno hace que el elemento no tenga espacio y se haya ido por completo, mientras todavía existe en el DOM.

 10
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-07-21 16:13:52

La visibilidad solo hace que el elemento sea invisible, pero todavía ocuparía espacio en la pantalla.

 6
Author: Seph,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-07-21 16:14:21

Visibility:hidden simplemente haga que el elemento sea invisible, pero se carga en DOM por lo que consume tiempo de carga. Pero Display:none no carga el elemento.

 1
Author: anil kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-23 04:49:49