Curso jQuery: 8 Animando componentes
Nueva noticia publicada en https://amdisenoweb.es/animando-componentes/
Curso jQuery: 8 Animando componentes
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);