En estos últimos años la velocidad de carga de los sitios webs ha ido cobrando cada vez más importancia debido principalmente a 2 factores,...
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.
Quizás te interese ...
Los parámetros de url son muy útiles para pasar datos a aplicaciones web, hoy en día su uso se está extendiendo más gracias a NodeJS, el...
¿Cuantas funciones js hay en total en nuestro sitio web? Conforme va creciendo nuestro sitio, necesitamos incluir funciones que normalmente...
La barra de navegación (navbar) es sin duda una de las piezas fundamentales de un proyecto, pero no por ello se ha de construir un devorador...
Valoraciones
Sé el primero en valorar