¿Te gustaría agregar un toque animado a tu web? Si es así, entonces debes conocer el efecto animado de jQuery. Esta herramienta es muy útil para crear animaciones impactantes y atractivas que mejoren la apariencia y usabilidad de tu sitio web. En este artículo de TIEngranaje te explicamos todo lo que necesitas saber para integrar este efecto en tu página web de manera fácil y rápida. ¡No te lo pierdas!
El método animado jQuery se puede usar para crear una animación personalizada de sus elementos HTML simplemente con el uso de propiedades CSS. Este método de animación modifica la propiedad de estilo de un elemento de manera gradual para crear el efecto de animación.
El .animate() El método nos permite crear efectos de animación en cualquier propiedad CSS numérica. El único parámetro requerido es un mapa de propiedades CSS similar al que se puede enviar al .css() método. Usar += o -= para animaciones relativas.
Sintaxis
$(selector).animate({styles},speed,easing,callback)| Parámetro | Descripción |
|---|---|
styles |
Especifica una o más propiedades y valores CSS para animar |
speed |
Opcional, especifica la velocidad de la animación. |
easing |
Opcional, especifica una función de aceleración (oscilación/lineal) |
callback |
Una función opcional para ejecutar después de que se complete el método |
Estilos
Los estilos enumerados en la siguiente tabla usan la convención de nomenclatura DOM, no CSS. Por ejemplo tenga en cuenta que paddingLeft no es padding-left.
backgroundPositionborderBottomWidthborderLeftWidthborderRightWidthborderSpacingborderTopWidthborderWidthbottomfontfontSizeheightleftletterSpacinglineHeightmarginmarginBottommarginLeftmarginRightmarginTopmaxHeightmaxWidthoutlineWidthpaddingpaddingBottompaddingLeftpaddingRightpaddingToprighttextIndenttopwidthwordSpacing
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-animate-method-effect/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Ejemplo
El div con varias propiedades diferentes.
<script type="text/javascript">
$("#go").click(function () {
$("#div1").animate({
width: "82%",
height: "90px",
margin: "10px",
fontSize: "3em",
borderWidth: "5px"
}, 2000);
});
</script"><script type="text/javascript">
$("#go").click(function () {
$("#div1")
.animate({width: "82%"}, "slow")
.animate({height: "90px"}, "slow");
});
</script">Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
