ejemplos de animar varias propiedades css con JQuery

ejemplos de animar varias propiedades css con JQuery

ejemplos de animar varias propiedades css con JQuery

ejemplos de animar varias propiedades css con JQuery

en este ejemplo aprendes como animar varias propiedades CSS utilizando la librería jQuery y el método animate()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
  $("#texto").animate({
    left: '550px',
    opacity: '0',
    height: '150px',
    width: '350px'
   });
});
});
</script>
</head>
<body>
<button>Empezar</button>

<div id="texto" style="background:#74DEFF;height:50px;width:220px;position:absolute; font-size:24px;">Videotutoriales.es</div>

</body>
</html>

en la parte de abajo de este código tenemos el apartado body en el cual tenemos un botón y un div identificado como texto el cual le hemos aplicado una serie de propiedades CSS cómo es el color del fondo, una anchura y una altura, y  la posición absoluta, también hemos modificado el tamaño de la fuente a 24.

y en la parte de programación lo primero es crear una Live enlace a la librería jQuery

y después en el método ready del documento preparamos el evento Click del botón en el cual indicamos qué anime una serie de propiedades al DIV o elemento identificado como” texto”

para ello utilizaremos el método animate de jQuery y entre los parentesis y unas llaves escribiremos la Propiedad dos puntos “:”  y entre comillas simple el valor que le queremos dar, el cual será animado con la diferencia del valor que tiene actualmente y con este que estás introduciendo en estos momentos.

en este ejemplo hemos animado 4 propiedades que son

left  para que el elemento se mueva – a la posición 550 es decir un desplazamiento horizontal

hemos animado también la propiedad opacidad y la hemos puesto en 0 con lo que además desplazarse se ocultara

y también hemos animado la Propiedad height o altura y width o anchura para cambiar el tamaño.

con la función animate  de jQuery puedes animar tantas propiedades CSS como quieras, simplemente has de separarlas entre comas “,”