Mostar y ocultar elementos con fadeToggle

11 de /abril04 de /2014
1m 28s
jquery
0 comentarios
1754

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.

Valoraciones

Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies