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);
