ejemplos de animaciones una detras de otra o consecutivas con JQuery

ejemplos de animaciones una detras de otra o consecutivas con JQuery

ejemplos de animaciones una detras de otra o consecutivas con JQuery

ejemplos de animaciones una detras de otra o consecutivas con JQuery

en este ejemplo aprendes como animar propiedades CSS una detrás de otra no animar todas las propiedades al mismo tiempo cómo sería lo normal si lo escribes todo en una sola línea

<!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(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>

<button>Empezar</button>

<div style="background:#98bf21;height:100px;width:100px;"></div>
</body>
</html>

como puedes ver en el apartado del Body tenemos un botón y una caja o Dip con algunas propiedades CSS modificadas como son el color de fondo la altura y la anchura que lo tenemos a 100 píxeles

y en la parte de arriba tenemos un enlace a la librería jQuery

y en la parte de programación en el evento ready del documento programamos el evento Click del botón

para empezar creamos una variable con el elemento qué queremos animar y después en diferentes líneas utilizamos el método animate para animar las propiedades que creemos, en este caso en cada línea hemos animado la altura, la anchura y la opacidad .

si te fijas en la primera línea de animación animamos la altura y la opacidad a 0.4 y con una velocidad lenta o slow

en la segunda línea y hemos animado la anchura a 300 y una opacidad de 0.8 con la misma velocidad lenta o slow

en la tercera línea hemos animado la altura a su altura original 100 píxeles y la opacidad a 0.4

y para finalizar en la última línea de la animación animamos la anchura a su anchura original

con esto has visto cómo utilizar la cola de animación que utiliza jQuery de forma natural. simplemente ejecuta el método animate al mismo elemento en diferentes líneas y con diferentes valores en las propiedades CSS