Animaciones en jQuery con animate()

31 de /enero01 de /2015
2m 49s
jquery
0 comentarios
2666

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

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies