En esta entrada vamos a ver como podemos hacer desparecer o que aparezcan diferentes componentes, ademas de hacerlos que se desvanezcan o aparezcan lentamente.

jQuery tiene muchas funciones y ademas muchas de estas se pueden anidar unas dentro de otras. Cuando queremos que desaparezca o mostrar un componente utilizaremos las funciones:

.hide(); esta función sirve para ocular los elementos seleccionados

.show(); esta función sirve para mostrar los elementos seleccionados

Además estas funciones se pueden modificar, o utilizar sus variantes en las que les pasamos una velocidad o una función que se ejecutará cuando se termine de realizar la operación en concreto.

.show(velocidad, función callback);   .hide(velocidad, función callback)

Existe otra función con las mismas variantes que es:

.toogle() esta función muestra un elemento si esta oculto o le oculta si esta visible.

Para hacer desvanecer o aparecer componentes se utiliza la función fade en una de sus variante

.fadeIn(velocidad, función callback); aparece gradualmente con una función que se ejecutara al finalizar el evento

.fadeOut(velocidad, función callback); desaparece gradualmente con una función que se ejecutara al finalizar el evento

.fadeTo(velocidad, función callback); cambia la opacidad de los elementos gradualmente con una función que se ejecutara al finalizar el evento.

Otra forma de que se oculte o muestren los elementos es mediante el “deslizamiento” de los mismos utilizando las funciones

.slideDown(velocidad, función callback); se desliza hacia abajo lo que hace que se muestren los elementos y al finalizar ejecuta la función de vuelta.

.slideUp(velocidad, función callback); se desliza hacia arriba lo que hace que se oculten los elementos y al finalizar ejecuta la función de vuelta.

.slideToggle(velocidad, función callback); se desliza hacia abajo o hacia arriba dependiendo del estado en el que se encuentre los elementos y al finalizar ejecuta la función de vuelta.

Supongamos que tenemos un div “caja1” el cual cuando pinchemos en un texto efectos nos aplique los efectos vistos hasta ahora.

<style type="text/css">
	.caja1{
		background-color: blue;
		height:400px;
		width:400px;
		position:relative;
		left:400px;
		border: 2px solid #ffff00;
		padding:10px;
		margin:10px;
	}	
</style>
</head>
<body>
<div class="caja1"></div>
<div style="position:absolute; top:0px;">
<a href="javascript:void(0);" class="efectos">Efectos</a>

</div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e){
		$(".efectos").click(function (e){
			$(".caja1").hide("slow");
			$(".caja1").show("fast");
			$(".caja1").fadeOut(1000);
			$(".caja1").fadeIn(800);
			$(".caja1").slideUp(1000);
			$(".caja1").slideDown(800);
		});
});
</script>

Otra forma de  crear animaciones o que aparezcan y desaparezcan las cosas es mediante la función animate, a esta función se le pueden pasar 4 parámetros, el primero son los estilos css que queremos cambiar encerrados entre llaves, a continuación la duración del efecto, el tercero es el tipo de función para efectuar la animación que puede ser linear o wing y el ultimo es una función de callbak o de vuelta, los dos últimos son opcionales con lo que se pueden poner o no.

.animate(estilos css, duracion, aesing, función callback);

Siguiendo el anterior ejemplo podría quedar algo como lo siguiente en el cual le cambiamos el ancho, alto y opacidad:

$(".caja1").animate({width:300,height:500,opacity:0.5},1000);

Pin It on Pinterest