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.

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies