9.- La función Animate – Curso Básico de #Jquery #9

La función animate() de jquery nos sirve para crear animaciones, transformando los elementos HTML de nuestro sitio web. Su funcionalidad se basa en: realizar una transformación del elemento recibiendo el estilo final (CSS) que tendrá nuestro objeto, alguna acción (reducir de tamaño, desaparecerlo) y en que tiempo se realizara el efecto.

Algo que vale la pena recordar, es que siendo una función de jquery, esta función tiene un parámetro al final para ejecutar un callback, y así podemos realizar varias animaciones en secuencia.

Para comprender la función muestro el siguiente ejemplo, en el cual línea por línea explico que es lo que realiza:

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>animate</title>
        <script src="../scripts/jquery.js"></script>
    </head>

    <body>
    	<input type="button" value="inicia" onclick="inicia();" />
        <div  style="width:100px; position:relative; height:100px; background:#060;"></div>
        <br />

    </body>
</html>

Código Jquery

function inicia(){
	$("div")
	.animate({ //seleccionamos el div
			  opacity: 0.25, //dismunuye la opacidad del objeto
			  left: "+=100", //aumenta la posicion en horizontal del objeto a 100 px
			  height: "toggle" //oculta el objeto
			}, 2000  //la animación se realiza en 2 segundos
			, function() { //ejecutamos un callback con función anonima para regresar a la normalidad el objeto
			   $("div").animate({ //seleccionamos nuevamente el div
				  opacity:1, //regresa la opacidad del objeto a normal
				  left:"-=100", //dismunuye la posicion del objeto menos 100 px
				  height:"toggle" //aparece el objeto
				  },1000   //tiempo de 1 segundo
				  ,inicia //el callback ejecuta la funcion inica para volver a comenzar todo
			   )
		  })
}

Ejemplo en ejecución

El código anterior, al presionar el botón inicia, realiza una animación y ejecuta un callback para regresar el div a su estado original.

Utilizando animate() podemos realizar todo tipo de animaciones a nuestros elementos HTML, recomiendo que la utilicen e intenten realizar cosas por si solos en lugar de bajar cosas ya hechas, esto les ayudara a comprender como funcionan los plugins de jquery y les dará facilidad para modificarlos o crear los plugins propios (creación de plugins de jquery, el siguiente curso que estoy por hacer).

Ir al Capitulo Siguiente (10.- Creación de Elementos HTML con Jquery).

Ir al  Capitulo Anterior (8.- Callbacks).

mm

About

Desarrollador de software, lector compulsivo.

View all posts by