Animaciones en jQuery con animate()

animate()

El método animate() ejecuta una animación con diversos parametros sobre uno o mas elementos en un documento a partir de un conjunto de propiedades CSS, su función es cambiar el estado de los elementos seleccionados modificando los valores de las propiedades.

Para usar este método es imprencindible especificar una o mas propiedades, se puede especificar practicamente cualquier propiedad CSS que obtenga un valor de tipo numerico, como “height”, “width”, “margin”, “padding”, “top” …

$("#caja").animate({height: "100px", width: "100px"});

Recuerda que para especificar propiedades “camel-cased” debemos escribir las propiedades como habitualmente hacemos en jQuery

padding-left    =>    paddingLeft

word-spacing    =>    wordSpacing

background-position     =>    backgroundPosition

Opcionalmente podemos especificar el tiempo de la animación con los valores “fast” y “slow” o indicar el tiempo en milisegundos

$("#caja").animate({width: "100px"}, "slow");
$("#caja").animate({width: "100px"}, "fast");
$("#caja").animate({width: "100px"}, 3000);

A continuación creamos un ejemplo con todo lo explicado hasta ahora

<script>
	$(document).ready(function(){
		$("#boton1").click(function(){
			$("#caja").animate({height: "100px", width: "100px"}, "slow");
			$("#caja").animate({marginLeft: "200px"}, "fast");
			$("#caja").animate({marginLeft: "0px"}, 1500);
		});
		$("#boton2").click(function(){
			$("#caja").animate({height: "50px", width: "50px", marginLeft: "0"});
		});
	});
</script>
<button id="boton1" class="boton">OK</button>
<button id="boton2" class="boton">Reset</button>
<div id="caja" style="background:#0099CC;height:50px;width:50px;"></div>

Las propiedades de color no estan accesibles con este método desde la libreria de jQuery, para acceder a estas propiedades podemos descargar el plugin especifico en jquery.com, algunas propiedades de color tambien son accesibles con el método css().

A continuación creamos un ejemplo mas avanzado usando ademas el metodo css()

<script>
	$(document).ready(function(){
		$("#boton3").click(function(){
			$("#caja2").animate({height: "100px", width: "100px"}, "slow");
			$("#caja2").css("background", "#6633FF");
			$("#caja2").animate({marginLeft: "200px"}, "fast");
			$("#caja2").animate({marginLeft: "0px"}, 1500);
			$("#txtdisp").animate({fontSize: "16px"}, "slow");
			$("#caja2").css("border-color", "#FFFF00");
		});
		$("#boton4").click(function(){
			$("#caja2").animate({height: "50px", width: "50px", marginLeft: "0"});
			$("#caja2").css("background", "#0099CC");
			$("#caja2").css("border-color", "#00FF00");
			$("#txtdisp").animate({fontSize: "0px"}, "slow");
		});
	});
</script>
<button id="boton3" class="boton">OK</button>
<button id="boton4" class="boton">Reset</button><br><br>
<div id="caja2" style="background: #0099CC;height: 50px;width: 50px;border: 3px solid #00FF00">
	<span style=" font-size: 0px;padding: 10px;color:#FFFFFF;" id="txtdisp">Didesweb</span>
</div>

Puedes ver el código de este archivo en mi cuenta de GitHub.