🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 198 (from laksa074)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa198.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/\')), getAhrefsUnparsedNoserviceFromURL(\'https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/guidacode.com\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/","crawl_time":1774998242,"first_indexed_time":1646699840,"http_code":200,"src_unparsed":"com,guidacode!\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/ s443","src_root_hash":"18412439651089909398","history_drop_reason":null,"meta_title":"Efectos de jQuery: Mostrar y ocultar elementos con jQuery - Guidacode","meta_descriptions":["Este post muestra cómo emplear mediante ejemplos las funciones básicas para mostrar y ocultar elementos con jQuery de manera sencilla."],"attrs_boilerpipe_text":"Cómo crear el efecto slide en jQuery\nCómo mostrar y ocultar elemento con el efecto fade en jQuery\nEfectos de jQuery: Mostrar y ocultar elementos con jQuery\nSeguramente te hayas encontrado en la situación de tener que mostrar u ocultar elementos. Esto se puede hacer con JavaScript pero, jQuery proporciona un conjunto de funciones que permiten mostrar y ocultar elementos. En este post voy a mostrar funciones básicas para\nmostrar y ocultar elementos con jQuery\n.\nPara usar esos efectos, se\naplican a la selección jQuery\n, cómo cualquier función. Por ejemplo, si quiero ocultar los elementos con la clase ocultar, lo haría de la siguiente forma\nJavaScript\n1\n$\n(\n'.ocultar'\n)\n.\nhide\n(\n)\n;\nAdemás, cada función de efecto puede tener como parámetros opcionales\nla velocidad y una función callback\n. La velocidad es el tiempo que tarda en completarse el efecto mientras que la función callback es la función que se ejecuta\ncuando el efecto ha terminado\n.\nPara asignar la velocidad, puede emplearse un string («fast», «normal» o «slow») o los milisegundos que toma el efecto. En cuanto a los string, para ser más concretos serían 200, 400 y 600 milisegundos respectivamente.\nCuando se aplica un efecto que hace desaparecer un elemento, como en ejemplo que acabo de mostrar, este\nno se elimina del navegador\n. El elemento sigue estando en el\nDOM\n \npero con la propiedad \ndisplay\nen none. Al emplear\ndisplay\ny no\nvisibility\n, el elemento oculto no ocupa espacio dando la sensación de que no existe. Si esta propiedad te provoca dudas\nte recomiendo este post\n.\nFunción show()\nEsta función hace que un elemento oculto pase a ser visible, bastante lógico no? Obviamente si lo aplicas a un elemento visible no tendrá efecto. En caso de no pasarle una velocidad, el elemento aparece inmediatamente. Sin embargo, si le pasas una velocidad, el elemento\nva apareciendo desde la esquina superior izquierda\nhasta la inferior derecha.\nPor ejemplo, un\ndiv\ncon el «id» prueba con las siguientes regla en CSS\nCSS\n1\n2\n3\n4\n5\n6\n7\n8\n<style>\n#prueba\n{\n  \nwidth\n:\n100px\n;\n  \nheight\n:\n100px\n;\n  \nbackground-color\n:\n#F00\n;\n  \ndisplay\n:\nnone\n}\n<\/style>\nEl div estará oculto por defecto y para mostrarlo, hay que darle al botón «mostrar».  Para ello le asignamos a «mostrar» la función del evento click y dentro de este la función\nshow\n().\nXHTML\n1\n2\n3\n4\n5\n6\n7\n8\n9\n<button\nid\n=\n\"mostrar\"\n>\nMostrar\n<\/button>\n<br\n\/>\n<div\nid\n=\n\"prueba\"\n>\n<\/div>\n<script>\n$\n(\n'#mostrar'\n)\n.\nclick\n(\nfunction\n(\n)\n{\n$\n(\n'#prueba'\n)\n.\nshow\n(\n1000\n)\n;\n}\n)\n;\n<\/script>\nFunción hide\nSucede lo mismo que con\nshow\n() pero al revés.  Sin embargo, si le asignamos una velocidad, el elemento se\nirá encogiendo hasta desaparecer\n. Esta vez quitamos la propiedad\ndisplay\ny cambiamos tanto el botón como la acción dentro de la función click()\nXHTML\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n<button\nid\n=\n\"ocultar\"\n>\nOcultar\n<\/button>\n<br\n\/>\n<div\nid\n=\n\"prueba\"\n>\n<\/div>\n<script>\n$\n(\n'#ocultar'\n)\n.\nclick\n(\nfunction\n(\n)\n{\n \n \n$\n(\n'#prueba'\n)\n.\nhide\n(\n1000\n)\n;\n}\n)\n;\n<\/script>\nFunción toggle\nEsta función\nalterna el valor\ndisplay\ndel elemento. Si un elemento está visible,\ntoggle\n() lo culta y si está oculto lo muestra. Es una función ideal cuando quieres un control o botón que te sirva para mostrar y ocultar un elemento.\nJavaScript\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n<\nbutton\nid\n=\n\"alternar\"\n>\nAlternar\n<\n\/\nbutton\n>\n<\nbr\n\/\n>\n<\ndiv\nid\n=\n\"prueba\"\n>\n<\n\/\ndiv\n>\n<script>\n$\n(\n'#alternar'\n)\n.\nclick\n(\nfunction\n(\n)\n{\n$\n(\n'#prueba'\n)\n.\ntoggle\n(\n)\n;\n}\n)\n;\n<\/script>\nY hasta aquí las funciones básicas para mostrar y ocultar elementos con jQuery, espero que os haya gustado. A seguir picando 🙂","attrs_markdown":"- [Inicio](https:\/\/guidacode.com\/)\n- [HTML5](https:\/\/guidacode.com\/category\/html5\/)\n- [CSS](https:\/\/guidacode.com\/category\/css\/)\n  - [Sass](https:\/\/guidacode.com\/category\/css\/sass\/)\n- [JavaScript](https:\/\/guidacode.com\/category\/javascript\/)\n- [AngularJS](https:\/\/guidacode.com\/category\/angularjs\/)\n- [jQuery](https:\/\/guidacode.com\/category\/jquery\/)\n- [PHP](https:\/\/guidacode.com\/category\/php\/)\n  - [CodeIgniter](https:\/\/guidacode.com\/category\/php\/codeigniter\/)\n- [WordPress](https:\/\/guidacode.com\/category\/wordpress\/)\n\n[![Guidacode](https:\/\/guidacode.com\/wp-content\/uploads\/2018\/04\/cropped-Logo-4.png)](https:\/\/guidacode.com\/ \"Guidacode\")\n\n[Facebook](https:\/\/www.facebook.com\/guidacode\/)[Twitter](https:\/\/twitter.com\/guidacode)[Google+](https:\/\/plus.google.com\/102054666260881551223)[CodePen](https:\/\/codepen.io\/guidacode\/)[GitHub](https:\/\/github.com\/guidacode)\n\n### Menú\n- [Inicio](https:\/\/guidacode.com\/)\n- [HTML5](https:\/\/guidacode.com\/category\/html5\/)\n- [CSS](https:\/\/guidacode.com\/category\/css\/)\n  - [Sass](https:\/\/guidacode.com\/category\/css\/sass\/)\n- [JavaScript](https:\/\/guidacode.com\/category\/javascript\/)\n- [AngularJS](https:\/\/guidacode.com\/category\/angularjs\/)\n- [jQuery](https:\/\/guidacode.com\/category\/jquery\/)\n- [PHP](https:\/\/guidacode.com\/category\/php\/)\n  - [CodeIgniter](https:\/\/guidacode.com\/category\/php\/codeigniter\/)\n- [WordPress](https:\/\/guidacode.com\/category\/wordpress\/)\n\n© Guidacode 2022 - [Agradecimientos](https:\/\/guidacode.com\/agradecimientos\/)\n\nFunciona con [Verbosa](http:\/\/example.com\/twenty-fourteen-child\/ \"Verbosa WordPress Theme by Cryout Creations\") &  [WordPress](http:\/\/wordpress.org\/ \"Plataforma semántica de publicación personal\").\n\nInicio [jQuery](https:\/\/guidacode.com\/category\/jquery\/)  Efectos de jQuery: Mostrar y ocultar elementos con jQuery\n\n# Efectos de jQuery: Mostrar y ocultar elementos con jQuery\n[*David*](https:\/\/guidacode.com\/author\/david\/ \"Ver todas las entradas de David\")\n\n28 agosto, 2017\n\n28 agosto, 2017\n\n[jQuery](https:\/\/guidacode.com\/category\/jquery\/)\n\n[Efectos de jQuery](https:\/\/guidacode.com\/series\/efectos-de-jquery\/ \"Efectos de jQuery\")\n\n- [Cómo crear el efecto slide en jQuery](https:\/\/guidacode.com\/2017\/jquery\/como-crear-efecto-slide-en-jquery\/ \"Cómo crear el efecto slide en jQuery\")\n- [Cómo mostrar y ocultar elemento con el efecto fade en jQuery](https:\/\/guidacode.com\/2017\/jquery\/mostrar-ocultar-el-efecto-fade-en-jquery\/ \"Cómo mostrar y ocultar elemento con el efecto fade en jQuery\")\n- Efectos de jQuery: Mostrar y ocultar elementos con jQuery\n\nSeguramente te hayas encontrado en la situación de tener que mostrar u ocultar elementos. Esto se puede hacer con JavaScript pero, jQuery proporciona un conjunto de funciones que permiten mostrar y ocultar elementos. En este post voy a mostrar funciones básicas para **mostrar y ocultar elementos con jQuery**.\n\nPara usar esos efectos, se **aplican a la selección jQuery**, cómo cualquier función. Por ejemplo, si quiero ocultar los elementos con la clase ocultar, lo haría de la siguiente forma\n\nJavaScript\n\n\\$('.ocultar').hide();\n\n|   |   |\n|---|---|\n| 1 | \\$('.ocultar').hide(); |\n\nAdemás, cada función de efecto puede tener como parámetros opcionales **la velocidad y una función callback**. La velocidad es el tiempo que tarda en completarse el efecto mientras que la función callback es la función que se ejecuta **cuando el efecto ha terminado**.\n\nPara asignar la velocidad, puede emplearse un string («fast», «normal» o «slow») o los milisegundos que toma el efecto. En cuanto a los string, para ser más concretos serían 200, 400 y 600 milisegundos respectivamente.\n\nCuando se aplica un efecto que hace desaparecer un elemento, como en ejemplo que acabo de mostrar, este **no se elimina del navegador**. El elemento sigue estando en el **[DOM](https:\/\/guidacode.com\/2016\/jquery\/jquery-dom-selectores-basicos\/)** pero con la propiedad *display* en none. Al emplear *display* y no *visibility*, el elemento oculto no ocupa espacio dando la sensación de que no existe. Si esta propiedad te provoca dudas **[te recomiendo este post](https:\/\/guidacode.com\/2016\/css\/ocultar-propiedad-visibility-css\/)**.\n\n## Función show()\nEsta función hace que un elemento oculto pase a ser visible, bastante lógico no? Obviamente si lo aplicas a un elemento visible no tendrá efecto. En caso de no pasarle una velocidad, el elemento aparece inmediatamente. Sin embargo, si le pasas una velocidad, el elemento **va apareciendo desde la esquina superior izquierda** hasta la inferior derecha.\n\nPor ejemplo, un *div* con el «id» prueba con las siguientes regla en CSS\n\nCSS\n\n\\<style\\> \\#prueba{ width:100px; height:100px; background-color:\\#F00; display:none } \\<\/style\\>\n\n|   |   |\n|---|---|\n| 1 2 3 4 5 6 7 8 | \\<style\\> \\#prueba{ width:100px; height:100px; background-color:\\#F00; display:none } \\<\/style\\> |\n\nEl div estará oculto por defecto y para mostrarlo, hay que darle al botón «mostrar». Para ello le asignamos a «mostrar» la función del evento click y dentro de este la función *show*().\n\nXHTML\n\n\\<button id=\"mostrar\"\\>Mostrar\\<\/button\\> \\<br \/\\> \\<div id=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#mostrar').click(function(){ \\$('\\#prueba').show(1000); }); \\<\/script\\>\n\n|   |   |\n|---|---|\n| 1 2 3 4 5 6 7 8 9 | \\<button id\\=\"mostrar\"\\>Mostrar\\<\/button\\> \\<br \/\\> \\<div id\\=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#mostrar').click(function(){ \\$('\\#prueba').show(1000); }); \\<\/script\\> |\n\n![mostrar y ocultar elementos jquery - Ejemplo con show()](https:\/\/guidacode.com\/wp-content\/uploads\/2017\/08\/mostrar-y-ocultar-elementos-jquery-show.gif)\n\n## Función hide\nSucede lo mismo que con *show*() pero al revés. Sin embargo, si le asignamos una velocidad, el elemento se **irá encogiendo hasta desaparecer**. Esta vez quitamos la propiedad *display* y cambiamos tanto el botón como la acción dentro de la función click()\n\nXHTML\n\n\\<button id=\"ocultar\"\\>Ocultar\\<\/button\\> \\<br \/\\> \\<div id=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#ocultar').click(function(){ \\$('\\#prueba').hide(1000); }); \\<\/script\\>\n\n|   |   |\n|---|---|\n| 1 2 3 4 5 6 7 8 9 10 | \\<button id\\=\"ocultar\"\\>Ocultar\\<\/button\\> \\<br \/\\> \\<div id\\=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#ocultar').click(function(){ \\$('\\#prueba').hide(1000); }); \\<\/script\\> |\n\n![mostra y ocultar elementos jquery - Ejemplo con shide)](https:\/\/guidacode.com\/wp-content\/uploads\/2017\/08\/hide.gif)\n\n## Función toggle\nEsta función **alterna el valor** *display* del elemento. Si un elemento está visible, *toggle*() lo culta y si está oculto lo muestra. Es una función ideal cuando quieres un control o botón que te sirva para mostrar y ocultar un elemento.\n\nJavaScript\n\n\\<button id=\"alternar\"\\>Alternar\\<\/button\\> \\<br \/\\> \\<div id=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#alternar').click(function(){ \\$('\\#prueba').toggle(); }); \\<\/script\\>\n\n|   |   |\n|---|---|\n| 1 2 3 4 5 6 7 8 9 10 | \\<button id\\=\"alternar\"\\>Alternar\\<\/button\\> \\<br \/\\> \\<div id\\=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#alternar').click(function(){ \\$('\\#prueba').toggle(); }); \\<\/script\\> |\n\n![mostrar y ocultar elementos jquery - Ejemplo con toogle()](https:\/\/guidacode.com\/wp-content\/uploads\/2017\/08\/toggle.gif)\n\nY hasta aquí las funciones básicas para mostrar y ocultar elementos con jQuery, espero que os haya gustado. A seguir picando 🙂\n\n[animación](https:\/\/guidacode.com\/tag\/animacion\/) \/ [básico](https:\/\/guidacode.com\/tag\/basico\/) \/ [efectos](https:\/\/guidacode.com\/tag\/efectos\/)\n\n[Me invitas a un café?](https:\/\/www.paypal.me\/GuidacodeBlog\/1)   [Me invitas a un café?](bitcoin:3AM9weuE4rA9QPdhsPB9CTxMMM1irze2Vn?message=Invitame%20a%20un%20caf%C3%A9%20%3B%29)\n\n*Anterior Post*[Las directivas de Angular: Manejar expresiones](https:\/\/guidacode.com\/2017\/angularjs\/directivas-angular-manejar-expresiones\/)\n\n*Siguiente Post*[Arrays en PHP: Funciones de array básicas](https:\/\/guidacode.com\/2017\/php\/arrays-php-funciones-de-array-basicas\/)\n\n## Meta\n- [Acceder](https:\/\/guidacode.com\/wp-login.php)\n- [Feed de entradas](https:\/\/guidacode.com\/feed\/)\n- [Feed de comentarios](https:\/\/guidacode.com\/comments\/feed\/)\n- [WordPress.org](https:\/\/es.wordpress.org\/)\n\n## Menú\n- [Contacto](https:\/\/guidacode.com\/contacto\/)\n- [Términos de uso](https:\/\/guidacode.com\/terminos-de-uso\/)\n- [Política de privacidad](https:\/\/guidacode.com\/politica-de-privacidad\/)\n\n## Etiquetas\n[animación](https:\/\/guidacode.com\/tag\/animacion\/) [archivo](https:\/\/guidacode.com\/tag\/archivo\/) [array](https:\/\/guidacode.com\/tag\/array\/) [avanzado](https:\/\/guidacode.com\/tag\/avanzado\/) [base de datos](https:\/\/guidacode.com\/tag\/base-de-datos\/) [bucle](https:\/\/guidacode.com\/tag\/bucle\/) [bucles](https:\/\/guidacode.com\/tag\/bucles\/) [básico](https:\/\/guidacode.com\/tag\/basico\/) [campos personalizados](https:\/\/guidacode.com\/tag\/campos-personalizados\/) [comentarios](https:\/\/guidacode.com\/tag\/comentarios\/) [condiciones](https:\/\/guidacode.com\/tag\/condiciones\/) [contenido](https:\/\/guidacode.com\/tag\/contenido\/) [CSS](https:\/\/guidacode.com\/tag\/css\/) [directivas](https:\/\/guidacode.com\/tag\/directivas\/) [disposicion](https:\/\/guidacode.com\/tag\/disposicion\/) [DOM](https:\/\/guidacode.com\/tag\/dom\/) [eventos](https:\/\/guidacode.com\/tag\/eventos\/) [expresiones](https:\/\/guidacode.com\/tag\/expresiones\/) [filtros](https:\/\/guidacode.com\/tag\/filtros\/) [fondo](https:\/\/guidacode.com\/tag\/fondo\/) [formulario](https:\/\/guidacode.com\/tag\/formulario\/) [funciones](https:\/\/guidacode.com\/tag\/funciones\/) [header](https:\/\/guidacode.com\/tag\/header\/) [HTML5](https:\/\/guidacode.com\/tag\/html5\/) [imagen](https:\/\/guidacode.com\/tag\/imagen\/) [input](https:\/\/guidacode.com\/tag\/input\/) [javascript](https:\/\/guidacode.com\/tag\/javascript\/) [loop](https:\/\/guidacode.com\/tag\/loop\/) [microdatos](https:\/\/guidacode.com\/tag\/microdatos\/) [módulo](https:\/\/guidacode.com\/tag\/modulo\/) [objetos](https:\/\/guidacode.com\/tag\/objetos\/) [plugins](https:\/\/guidacode.com\/tag\/plugins\/) [posicionado](https:\/\/guidacode.com\/tag\/posicionado\/) [position](https:\/\/guidacode.com\/tag\/position\/) [posts](https:\/\/guidacode.com\/tag\/posts\/) [preprocesador](https:\/\/guidacode.com\/tag\/preprocesador\/) [RSS](https:\/\/guidacode.com\/tag\/rss\/) [selector](https:\/\/guidacode.com\/tag\/selector\/) [selectores](https:\/\/guidacode.com\/tag\/selectores\/) [seo](https:\/\/guidacode.com\/tag\/seo\/) [tema](https:\/\/guidacode.com\/tag\/tema\/) [transición](https:\/\/guidacode.com\/tag\/transicion\/) [url](https:\/\/guidacode.com\/tag\/url\/) [validación](https:\/\/guidacode.com\/tag\/validacion\/) [variables](https:\/\/guidacode.com\/tag\/variables\/)\n\n[Volver arriba]()\n\nGestionar el consentimiento de las cookies\n\nPara ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y\/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.\n\nFuncional\n\nFuncional\n\nSiempre activo\n\nEl almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.\n\nPreferencias\n\nPreferencias\n\nEl almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.\n\nEstadísticas\n\nEstadísticas\n\nEl almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.  El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.\n\nMarketing\n\nMarketing\n\nEl almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.\n\n[Administrar opciones](https:\/\/guidacode.com\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/) [Gestionar los servicios](https:\/\/guidacode.com\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/) [Gestionar proveedores](https:\/\/guidacode.com\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/) [Leer más sobre estos propósitos](https:\/\/cookiedatabase.org\/tcf\/purposes\/)\n\nAceptar\n\nDenegar\n\nVer preferencias\n\nGuardar preferencias\n\n[Ver preferencias](https:\/\/guidacode.com\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/)\n\n[{title}](https:\/\/guidacode.com\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/) [{title}](https:\/\/guidacode.com\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/) [{title}](https:\/\/guidacode.com\/2017\/jquery\/efectos-jquery-mostrar-y-ocultar-elementos\/)\n\nGestionar consentimiento","attrs_readable_markdown":"- [Cómo crear el efecto slide en jQuery](https:\/\/guidacode.com\/2017\/jquery\/como-crear-efecto-slide-en-jquery\/ \"Cómo crear el efecto slide en jQuery\")\n- [Cómo mostrar y ocultar elemento con el efecto fade en jQuery](https:\/\/guidacode.com\/2017\/jquery\/mostrar-ocultar-el-efecto-fade-en-jquery\/ \"Cómo mostrar y ocultar elemento con el efecto fade en jQuery\")\n- Efectos de jQuery: Mostrar y ocultar elementos con jQuery\n\nSeguramente te hayas encontrado en la situación de tener que mostrar u ocultar elementos. Esto se puede hacer con JavaScript pero, jQuery proporciona un conjunto de funciones que permiten mostrar y ocultar elementos. En este post voy a mostrar funciones básicas para **mostrar y ocultar elementos con jQuery**.\n\nPara usar esos efectos, se **aplican a la selección jQuery**, cómo cualquier función. Por ejemplo, si quiero ocultar los elementos con la clase ocultar, lo haría de la siguiente forma\n\nJavaScript\n\n|   |   |\n|---|---|\n| 1 | \\$('.ocultar').hide(); |\n\nAdemás, cada función de efecto puede tener como parámetros opcionales **la velocidad y una función callback**. La velocidad es el tiempo que tarda en completarse el efecto mientras que la función callback es la función que se ejecuta **cuando el efecto ha terminado**.\n\nPara asignar la velocidad, puede emplearse un string («fast», «normal» o «slow») o los milisegundos que toma el efecto. En cuanto a los string, para ser más concretos serían 200, 400 y 600 milisegundos respectivamente.\n\nCuando se aplica un efecto que hace desaparecer un elemento, como en ejemplo que acabo de mostrar, este **no se elimina del navegador**. El elemento sigue estando en el **[DOM](https:\/\/guidacode.com\/2016\/jquery\/jquery-dom-selectores-basicos\/)** pero con la propiedad *display* en none. Al emplear *display* y no *visibility*, el elemento oculto no ocupa espacio dando la sensación de que no existe. Si esta propiedad te provoca dudas **[te recomiendo este post](https:\/\/guidacode.com\/2016\/css\/ocultar-propiedad-visibility-css\/)**.\n\n## Función show()\nEsta función hace que un elemento oculto pase a ser visible, bastante lógico no? Obviamente si lo aplicas a un elemento visible no tendrá efecto. En caso de no pasarle una velocidad, el elemento aparece inmediatamente. Sin embargo, si le pasas una velocidad, el elemento **va apareciendo desde la esquina superior izquierda** hasta la inferior derecha.\n\nPor ejemplo, un *div* con el «id» prueba con las siguientes regla en CSS\n\nCSS\n\n|   |   |\n|---|---|\n| 1 2 3 4 5 6 7 8 | \\<style\\> \\#prueba{ width:100px; height:100px; background-color:\\#F00; display:none } \\<\/style\\> |\n\nEl div estará oculto por defecto y para mostrarlo, hay que darle al botón «mostrar». Para ello le asignamos a «mostrar» la función del evento click y dentro de este la función *show*().\n\nXHTML\n\n|   |   |\n|---|---|\n| 1 2 3 4 5 6 7 8 9 | \\<button id\\=\"mostrar\"\\>Mostrar\\<\/button\\> \\<br \/\\> \\<div id\\=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#mostrar').click(function(){ \\$('\\#prueba').show(1000); }); \\<\/script\\> |\n\n![mostrar y ocultar elementos jquery - Ejemplo con show()](https:\/\/guidacode.com\/wp-content\/uploads\/2017\/08\/mostrar-y-ocultar-elementos-jquery-show.gif)\n\n## Función hide\nSucede lo mismo que con *show*() pero al revés. Sin embargo, si le asignamos una velocidad, el elemento se **irá encogiendo hasta desaparecer**. Esta vez quitamos la propiedad *display* y cambiamos tanto el botón como la acción dentro de la función click()\n\nXHTML\n\n|   |   |\n|---|---|\n| 1 2 3 4 5 6 7 8 9 10 | \\<button id\\=\"ocultar\"\\>Ocultar\\<\/button\\> \\<br \/\\> \\<div id\\=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#ocultar').click(function(){ \\$('\\#prueba').hide(1000); }); \\<\/script\\> |\n\n![mostra y ocultar elementos jquery - Ejemplo con shide)](https:\/\/guidacode.com\/wp-content\/uploads\/2017\/08\/hide.gif)\n\n## Función toggle\nEsta función **alterna el valor** *display* del elemento. Si un elemento está visible, *toggle*() lo culta y si está oculto lo muestra. Es una función ideal cuando quieres un control o botón que te sirva para mostrar y ocultar un elemento.\n\nJavaScript\n\n|   |   |\n|---|---|\n| 1 2 3 4 5 6 7 8 9 10 | \\<button id\\=\"alternar\"\\>Alternar\\<\/button\\> \\<br \/\\> \\<div id\\=\"prueba\"\\>\\<\/div\\> \\<script\\> \\$('\\#alternar').click(function(){ \\$('\\#prueba').toggle(); }); \\<\/script\\> |\n\n![mostrar y ocultar elementos jquery - Ejemplo con toogle()](https:\/\/guidacode.com\/wp-content\/uploads\/2017\/08\/toggle.gif)\n\nY hasta aquí las funciones básicas para mostrar y ocultar elementos con jQuery, espero que os haya gustado. A seguir picando 🙂","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

6 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.2 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/
Last Crawled	2026-03-31 23:04:02 (6 days ago)
First Indexed	2022-03-08 00:37:20 (4 years ago)
HTTP Status Code	200
Meta Title	Efectos de jQuery: Mostrar y ocultar elementos con jQuery - Guidacode
Meta Description	Este post muestra cómo emplear mediante ejemplos las funciones básicas para mostrar y ocultar elementos con jQuery de manera sencilla.
Meta Canonical	null
Boilerpipe Text	Cómo crear el efecto slide en jQuery Cómo mostrar y ocultar elemento con el efecto fade en jQuery Efectos de jQuery: Mostrar y ocultar elementos con jQuery Seguramente te hayas encontrado en la situación de tener que mostrar u ocultar elementos. Esto se puede hacer con JavaScript pero, jQuery proporciona un conjunto de funciones que permiten mostrar y ocultar elementos. En este post voy a mostrar funciones básicas para mostrar y ocultar elementos con jQuery . Para usar esos efectos, se aplican a la selección jQuery , cómo cualquier función. Por ejemplo, si quiero ocultar los elementos con la clase ocultar, lo haría de la siguiente forma JavaScript 1 $ ( '.ocultar' ) . hide ( ) ; Además, cada función de efecto puede tener como parámetros opcionales la velocidad y una función callback . La velocidad es el tiempo que tarda en completarse el efecto mientras que la función callback es la función que se ejecuta cuando el efecto ha terminado . Para asignar la velocidad, puede emplearse un string («fast», «normal» o «slow») o los milisegundos que toma el efecto. En cuanto a los string, para ser más concretos serían 200, 400 y 600 milisegundos respectivamente. Cuando se aplica un efecto que hace desaparecer un elemento, como en ejemplo que acabo de mostrar, este no se elimina del navegador . El elemento sigue estando en el DOM pero con la propiedad display en none. Al emplear display y no visibility , el elemento oculto no ocupa espacio dando la sensación de que no existe. Si esta propiedad te provoca dudas te recomiendo este post . Función show() Esta función hace que un elemento oculto pase a ser visible, bastante lógico no? Obviamente si lo aplicas a un elemento visible no tendrá efecto. En caso de no pasarle una velocidad, el elemento aparece inmediatamente. Sin embargo, si le pasas una velocidad, el elemento va apareciendo desde la esquina superior izquierda hasta la inferior derecha. Por ejemplo, un div con el «id» prueba con las siguientes regla en CSS CSS 1 2 3 4 5 6 7 8 <style> #prueba { width : 100px ; height : 100px ; background-color : #F00 ; display : none } </style> El div estará oculto por defecto y para mostrarlo, hay que darle al botón «mostrar». Para ello le asignamos a «mostrar» la función del evento click y dentro de este la función show (). XHTML 1 2 3 4 5 6 7 8 9 <button id = "mostrar" > Mostrar </button> <br /> <div id = "prueba" > </div> <script> $ ( '#mostrar' ) . click ( function ( ) { $ ( '#prueba' ) . show ( 1000 ) ; } ) ; </script> Función hide Sucede lo mismo que con show () pero al revés. Sin embargo, si le asignamos una velocidad, el elemento se irá encogiendo hasta desaparecer . Esta vez quitamos la propiedad display y cambiamos tanto el botón como la acción dentro de la función click() XHTML 1 2 3 4 5 6 7 8 9 10 <button id = "ocultar" > Ocultar </button> <br /> <div id = "prueba" > </div> <script> $ ( '#ocultar' ) . click ( function ( ) { $ ( '#prueba' ) . hide ( 1000 ) ; } ) ; </script> Función toggle Esta función alterna el valor display del elemento. Si un elemento está visible, toggle () lo culta y si está oculto lo muestra. Es una función ideal cuando quieres un control o botón que te sirva para mostrar y ocultar un elemento. JavaScript 1 2 3 4 5 6 7 8 9 10 < button id = "alternar" > Alternar < / button > < br / > < div id = "prueba" > < / div > <script> $ ( '#alternar' ) . click ( function ( ) { $ ( '#prueba' ) . toggle ( ) ; } ) ; </script> Y hasta aquí las funciones básicas para mostrar y ocultar elementos con jQuery, espero que os haya gustado. A seguir picando 🙂
Markdown	- [Inicio](https://guidacode.com/) - [HTML5](https://guidacode.com/category/html5/) - [CSS](https://guidacode.com/category/css/) - [Sass](https://guidacode.com/category/css/sass/) - [JavaScript](https://guidacode.com/category/javascript/) - [AngularJS](https://guidacode.com/category/angularjs/) - [jQuery](https://guidacode.com/category/jquery/) - [PHP](https://guidacode.com/category/php/) - [CodeIgniter](https://guidacode.com/category/php/codeigniter/) - [WordPress](https://guidacode.com/category/wordpress/) [![Guidacode](https://guidacode.com/wp-content/uploads/2018/04/cropped-Logo-4.png)](https://guidacode.com/ "Guidacode") [Facebook](https://www.facebook.com/guidacode/)[Twitter](https://twitter.com/guidacode)[Google+](https://plus.google.com/102054666260881551223)[CodePen](https://codepen.io/guidacode/)[GitHub](https://github.com/guidacode) ### Menú - [Inicio](https://guidacode.com/) - [HTML5](https://guidacode.com/category/html5/) - [CSS](https://guidacode.com/category/css/) - [Sass](https://guidacode.com/category/css/sass/) - [JavaScript](https://guidacode.com/category/javascript/) - [AngularJS](https://guidacode.com/category/angularjs/) - [jQuery](https://guidacode.com/category/jquery/) - [PHP](https://guidacode.com/category/php/) - [CodeIgniter](https://guidacode.com/category/php/codeigniter/) - [WordPress](https://guidacode.com/category/wordpress/) © Guidacode 2022 - [Agradecimientos](https://guidacode.com/agradecimientos/) Funciona con [Verbosa](http://example.com/twenty-fourteen-child/ "Verbosa WordPress Theme by Cryout Creations") & [WordPress](http://wordpress.org/ "Plataforma semántica de publicación personal"). Inicio [jQuery](https://guidacode.com/category/jquery/) Efectos de jQuery: Mostrar y ocultar elementos con jQuery # Efectos de jQuery: Mostrar y ocultar elementos con jQuery [David](https://guidacode.com/author/david/ "Ver todas las entradas de David") 28 agosto, 2017 28 agosto, 2017 [jQuery](https://guidacode.com/category/jquery/) [Efectos de jQuery](https://guidacode.com/series/efectos-de-jquery/ "Efectos de jQuery") - [Cómo crear el efecto slide en jQuery](https://guidacode.com/2017/jquery/como-crear-efecto-slide-en-jquery/ "Cómo crear el efecto slide en jQuery") - [Cómo mostrar y ocultar elemento con el efecto fade en jQuery](https://guidacode.com/2017/jquery/mostrar-ocultar-el-efecto-fade-en-jquery/ "Cómo mostrar y ocultar elemento con el efecto fade en jQuery") - Efectos de jQuery: Mostrar y ocultar elementos con jQuery Seguramente te hayas encontrado en la situación de tener que mostrar u ocultar elementos. Esto se puede hacer con JavaScript pero, jQuery proporciona un conjunto de funciones que permiten mostrar y ocultar elementos. En este post voy a mostrar funciones básicas para mostrar y ocultar elementos con jQuery. Para usar esos efectos, se aplican a la selección jQuery, cómo cualquier función. Por ejemplo, si quiero ocultar los elementos con la clase ocultar, lo haría de la siguiente forma JavaScript \$('.ocultar').hide(); \| \| \| \|---\|---\| \| 1 \| \$('.ocultar').hide(); \| Además, cada función de efecto puede tener como parámetros opcionales la velocidad y una función callback. La velocidad es el tiempo que tarda en completarse el efecto mientras que la función callback es la función que se ejecuta cuando el efecto ha terminado. Para asignar la velocidad, puede emplearse un string («fast», «normal» o «slow») o los milisegundos que toma el efecto. En cuanto a los string, para ser más concretos serían 200, 400 y 600 milisegundos respectivamente. Cuando se aplica un efecto que hace desaparecer un elemento, como en ejemplo que acabo de mostrar, este no se elimina del navegador. El elemento sigue estando en el [DOM](https://guidacode.com/2016/jquery/jquery-dom-selectores-basicos/) pero con la propiedad display en none. Al emplear display y no visibility, el elemento oculto no ocupa espacio dando la sensación de que no existe. Si esta propiedad te provoca dudas [te recomiendo este post](https://guidacode.com/2016/css/ocultar-propiedad-visibility-css/). ## Función show() Esta función hace que un elemento oculto pase a ser visible, bastante lógico no? Obviamente si lo aplicas a un elemento visible no tendrá efecto. En caso de no pasarle una velocidad, el elemento aparece inmediatamente. Sin embargo, si le pasas una velocidad, el elemento va apareciendo desde la esquina superior izquierda hasta la inferior derecha. Por ejemplo, un div con el «id» prueba con las siguientes regla en CSS CSS \<style\> \#prueba{ width:100px; height:100px; background-color:\#F00; display:none } \</style\> \| \| \| \|---\|---\| \| 1 2 3 4 5 6 7 8 \| \<style\> \#prueba{ width:100px; height:100px; background-color:\#F00; display:none } \</style\> \| El div estará oculto por defecto y para mostrarlo, hay que darle al botón «mostrar». Para ello le asignamos a «mostrar» la función del evento click y dentro de este la función show(). XHTML \<button id="mostrar"\>Mostrar\</button\> \<br /\> \<div id="prueba"\>\</div\> \<script\> \$('\#mostrar').click(function(){ \$('\#prueba').show(1000); }); \</script\> \| \| \| \|---\|---\| \| 1 2 3 4 5 6 7 8 9 \| \<button id\="mostrar"\>Mostrar\</button\> \<br /\> \<div id\="prueba"\>\</div\> \<script\> \$('\#mostrar').click(function(){ \$('\#prueba').show(1000); }); \</script\> \| ![mostrar y ocultar elementos jquery - Ejemplo con show()](https://guidacode.com/wp-content/uploads/2017/08/mostrar-y-ocultar-elementos-jquery-show.gif) ## Función hide Sucede lo mismo que con show() pero al revés. Sin embargo, si le asignamos una velocidad, el elemento se irá encogiendo hasta desaparecer. Esta vez quitamos la propiedad display y cambiamos tanto el botón como la acción dentro de la función click() XHTML \<button id="ocultar"\>Ocultar\</button\> \<br /\> \<div id="prueba"\>\</div\> \<script\> \$('\#ocultar').click(function(){ \$('\#prueba').hide(1000); }); \</script\> \| \| \| \|---\|---\| \| 1 2 3 4 5 6 7 8 9 10 \| \<button id\="ocultar"\>Ocultar\</button\> \<br /\> \<div id\="prueba"\>\</div\> \<script\> \$('\#ocultar').click(function(){ \$('\#prueba').hide(1000); }); \</script\> \| ![mostra y ocultar elementos jquery - Ejemplo con shide)](https://guidacode.com/wp-content/uploads/2017/08/hide.gif) ## Función toggle Esta función alterna el valor display del elemento. Si un elemento está visible, toggle() lo culta y si está oculto lo muestra. Es una función ideal cuando quieres un control o botón que te sirva para mostrar y ocultar un elemento. JavaScript \<button id="alternar"\>Alternar\</button\> \<br /\> \<div id="prueba"\>\</div\> \<script\> \$('\#alternar').click(function(){ \$('\#prueba').toggle(); }); \</script\> \| \| \| \|---\|---\| \| 1 2 3 4 5 6 7 8 9 10 \| \<button id\="alternar"\>Alternar\</button\> \<br /\> \<div id\="prueba"\>\</div\> \<script\> \$('\#alternar').click(function(){ \$('\#prueba').toggle(); }); \</script\> \| ![mostrar y ocultar elementos jquery - Ejemplo con toogle()](https://guidacode.com/wp-content/uploads/2017/08/toggle.gif) Y hasta aquí las funciones básicas para mostrar y ocultar elementos con jQuery, espero que os haya gustado. A seguir picando 🙂 [animación](https://guidacode.com/tag/animacion/) / [básico](https://guidacode.com/tag/basico/) / [efectos](https://guidacode.com/tag/efectos/) [Me invitas a un café?](https://www.paypal.me/GuidacodeBlog/1) [Me invitas a un café?](bitcoin:3AM9weuE4rA9QPdhsPB9CTxMMM1irze2Vn?message=Invitame%20a%20un%20caf%C3%A9%20%3B%29) Anterior Post[Las directivas de Angular: Manejar expresiones](https://guidacode.com/2017/angularjs/directivas-angular-manejar-expresiones/) Siguiente Post[Arrays en PHP: Funciones de array básicas](https://guidacode.com/2017/php/arrays-php-funciones-de-array-basicas/) ## Meta - [Acceder](https://guidacode.com/wp-login.php) - [Feed de entradas](https://guidacode.com/feed/) - [Feed de comentarios](https://guidacode.com/comments/feed/) - [WordPress.org](https://es.wordpress.org/) ## Menú - [Contacto](https://guidacode.com/contacto/) - [Términos de uso](https://guidacode.com/terminos-de-uso/) - [Política de privacidad](https://guidacode.com/politica-de-privacidad/) ## Etiquetas [animación](https://guidacode.com/tag/animacion/) [archivo](https://guidacode.com/tag/archivo/) [array](https://guidacode.com/tag/array/) [avanzado](https://guidacode.com/tag/avanzado/) [base de datos](https://guidacode.com/tag/base-de-datos/) [bucle](https://guidacode.com/tag/bucle/) [bucles](https://guidacode.com/tag/bucles/) [básico](https://guidacode.com/tag/basico/) [campos personalizados](https://guidacode.com/tag/campos-personalizados/) [comentarios](https://guidacode.com/tag/comentarios/) [condiciones](https://guidacode.com/tag/condiciones/) [contenido](https://guidacode.com/tag/contenido/) [CSS](https://guidacode.com/tag/css/) [directivas](https://guidacode.com/tag/directivas/) [disposicion](https://guidacode.com/tag/disposicion/) [DOM](https://guidacode.com/tag/dom/) [eventos](https://guidacode.com/tag/eventos/) [expresiones](https://guidacode.com/tag/expresiones/) [filtros](https://guidacode.com/tag/filtros/) [fondo](https://guidacode.com/tag/fondo/) [formulario](https://guidacode.com/tag/formulario/) [funciones](https://guidacode.com/tag/funciones/) [header](https://guidacode.com/tag/header/) [HTML5](https://guidacode.com/tag/html5/) [imagen](https://guidacode.com/tag/imagen/) [input](https://guidacode.com/tag/input/) [javascript](https://guidacode.com/tag/javascript/) [loop](https://guidacode.com/tag/loop/) [microdatos](https://guidacode.com/tag/microdatos/) [módulo](https://guidacode.com/tag/modulo/) [objetos](https://guidacode.com/tag/objetos/) [plugins](https://guidacode.com/tag/plugins/) [posicionado](https://guidacode.com/tag/posicionado/) [position](https://guidacode.com/tag/position/) [posts](https://guidacode.com/tag/posts/) [preprocesador](https://guidacode.com/tag/preprocesador/) [RSS](https://guidacode.com/tag/rss/) [selector](https://guidacode.com/tag/selector/) [selectores](https://guidacode.com/tag/selectores/) [seo](https://guidacode.com/tag/seo/) [tema](https://guidacode.com/tag/tema/) [transición](https://guidacode.com/tag/transicion/) [url](https://guidacode.com/tag/url/) [validación](https://guidacode.com/tag/validacion/) [variables](https://guidacode.com/tag/variables/) [Volver arriba]() Gestionar el consentimiento de las cookies Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones. Funcional Funcional Siempre activo El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas. Preferencias Preferencias El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario. Estadísticas Estadísticas El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte. Marketing Marketing El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares. [Administrar opciones](https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/) [Gestionar los servicios](https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/) [Gestionar proveedores](https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/) [Leer más sobre estos propósitos](https://cookiedatabase.org/tcf/purposes/) Aceptar Denegar Ver preferencias Guardar preferencias [Ver preferencias](https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/) [{title}](https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/) [{title}](https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/) [{title}](https://guidacode.com/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/) Gestionar consentimiento
Readable Markdown	- [Cómo crear el efecto slide en jQuery](https://guidacode.com/2017/jquery/como-crear-efecto-slide-en-jquery/ "Cómo crear el efecto slide en jQuery") - [Cómo mostrar y ocultar elemento con el efecto fade en jQuery](https://guidacode.com/2017/jquery/mostrar-ocultar-el-efecto-fade-en-jquery/ "Cómo mostrar y ocultar elemento con el efecto fade en jQuery") - Efectos de jQuery: Mostrar y ocultar elementos con jQuery Seguramente te hayas encontrado en la situación de tener que mostrar u ocultar elementos. Esto se puede hacer con JavaScript pero, jQuery proporciona un conjunto de funciones que permiten mostrar y ocultar elementos. En este post voy a mostrar funciones básicas para mostrar y ocultar elementos con jQuery. Para usar esos efectos, se aplican a la selección jQuery, cómo cualquier función. Por ejemplo, si quiero ocultar los elementos con la clase ocultar, lo haría de la siguiente forma JavaScript \| \| \| \|---\|---\| \| 1 \| \$('.ocultar').hide(); \| Además, cada función de efecto puede tener como parámetros opcionales la velocidad y una función callback. La velocidad es el tiempo que tarda en completarse el efecto mientras que la función callback es la función que se ejecuta cuando el efecto ha terminado. Para asignar la velocidad, puede emplearse un string («fast», «normal» o «slow») o los milisegundos que toma el efecto. En cuanto a los string, para ser más concretos serían 200, 400 y 600 milisegundos respectivamente. Cuando se aplica un efecto que hace desaparecer un elemento, como en ejemplo que acabo de mostrar, este no se elimina del navegador. El elemento sigue estando en el [DOM](https://guidacode.com/2016/jquery/jquery-dom-selectores-basicos/) pero con la propiedad display en none. Al emplear display y no visibility, el elemento oculto no ocupa espacio dando la sensación de que no existe. Si esta propiedad te provoca dudas [te recomiendo este post](https://guidacode.com/2016/css/ocultar-propiedad-visibility-css/). ## Función show() Esta función hace que un elemento oculto pase a ser visible, bastante lógico no? Obviamente si lo aplicas a un elemento visible no tendrá efecto. En caso de no pasarle una velocidad, el elemento aparece inmediatamente. Sin embargo, si le pasas una velocidad, el elemento va apareciendo desde la esquina superior izquierda hasta la inferior derecha. Por ejemplo, un div con el «id» prueba con las siguientes regla en CSS CSS \| \| \| \|---\|---\| \| 1 2 3 4 5 6 7 8 \| \<style\> \#prueba{ width:100px; height:100px; background-color:\#F00; display:none } \</style\> \| El div estará oculto por defecto y para mostrarlo, hay que darle al botón «mostrar». Para ello le asignamos a «mostrar» la función del evento click y dentro de este la función show(). XHTML \| \| \| \|---\|---\| \| 1 2 3 4 5 6 7 8 9 \| \<button id\="mostrar"\>Mostrar\</button\> \<br /\> \<div id\="prueba"\>\</div\> \<script\> \$('\#mostrar').click(function(){ \$('\#prueba').show(1000); }); \</script\> \| ![mostrar y ocultar elementos jquery - Ejemplo con show()](https://guidacode.com/wp-content/uploads/2017/08/mostrar-y-ocultar-elementos-jquery-show.gif) ## Función hide Sucede lo mismo que con show() pero al revés. Sin embargo, si le asignamos una velocidad, el elemento se irá encogiendo hasta desaparecer. Esta vez quitamos la propiedad display y cambiamos tanto el botón como la acción dentro de la función click() XHTML \| \| \| \|---\|---\| \| 1 2 3 4 5 6 7 8 9 10 \| \<button id\="ocultar"\>Ocultar\</button\> \<br /\> \<div id\="prueba"\>\</div\> \<script\> \$('\#ocultar').click(function(){ \$('\#prueba').hide(1000); }); \</script\> \| ![mostra y ocultar elementos jquery - Ejemplo con shide)](https://guidacode.com/wp-content/uploads/2017/08/hide.gif) ## Función toggle Esta función alterna el valor display del elemento. Si un elemento está visible, toggle() lo culta y si está oculto lo muestra. Es una función ideal cuando quieres un control o botón que te sirva para mostrar y ocultar un elemento. JavaScript \| \| \| \|---\|---\| \| 1 2 3 4 5 6 7 8 9 10 \| \<button id\="alternar"\>Alternar\</button\> \<br /\> \<div id\="prueba"\>\</div\> \<script\> \$('\#alternar').click(function(){ \$('\#prueba').toggle(); }); \</script\> \| ![mostrar y ocultar elementos jquery - Ejemplo con toogle()](https://guidacode.com/wp-content/uploads/2017/08/toggle.gif) Y hasta aquí las funciones básicas para mostrar y ocultar elementos con jQuery, espero que os haya gustado. A seguir picando 🙂
Shard	198 (laksa)
Root Hash	18412439651089909398
Unparsed URL	com,guidacode!/2017/jquery/efectos-jquery-mostrar-y-ocultar-elementos/ s443