En estos últimos años la velocidad de carga de los sitios webs ha ido cobrando cada vez más importancia debido principalmente a 2 factores,...
Mostar y ocultar elementos con fadeToggle
jQuery nos permite ahorrar mucho código JS, con el método fadeToggle() podemos alternar los métodos fadeIn(), para mostrar un elemento oculto y fadeOut(), para ocultar un elemento visible, en un solo método.
Ejemplo:
Creamos un botón con identificador “boton” que será el encargado de ejecutar el script
<button id="boton">Mostrar/Ocultar elemento</button>
Creamos un elemento <div> con identificador “elemento” que será el elemento al que haremos referencia en el script, y agregamos contenido para mostrarlo en pantalla.
<div id="elemento">
<p>Texto que se muestra y se oculta mendiante un evento</p>
</div>
El script es muy sencillo, con el selector de elemento “$” seleccionamos el elemento con identificador “boton” seguido de un punto para acceder a la propiedad “click” que será la función que vamos a definir a continuación
Seleccionamos el elemento con identificador “elemento” seguido de un punto para acceder al método fadeToggle(), al cual vamos a pasarle el parámetro “slow” para que se muestre y se oculte lentamente y tenga un efecto más bonito.
<script>
$(document).ready(function(){
$("#boton").click(function(){
$("#elemento").fadeToggle("slow");
});
});
</script>
Puedes ver y descargar el código de este archivo en mi cuenta de GitHub.
Quizás te interese ...
Los parámetros de url son muy útiles para pasar datos a aplicaciones web, hoy en día su uso se está extendiendo más gracias a NodeJS, el...
¿Cuantas funciones js hay en total en nuestro sitio web? Conforme va creciendo nuestro sitio, necesitamos incluir funciones que normalmente...
La barra de navegación (navbar) es sin duda una de las piezas fundamentales de un proyecto, pero no por ello se ha de construir un devorador...
Valoraciones
Sé el primero en valorar