En este fragmento de código vamos a ver una animación con jQuery haciendo uso de los métodos animate() y stop(). Partimos de nuestro HTML con un cuadrado y dos botones, uno para animarlo y otro para parar la animación:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <title>Ejemplo animación jQuery</title> <style type="text/css"> #Cuadrado{ width: 100px; height: 100px; background: #2980b9; border-color: #FF622C; border-style: solid; border-radius: 25px; position: relative; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <button id="on">Animar</button> <button id="off">Parar</button> <p> <div id="Cuadrado"></div> </body> </html> |
Y nuestro código jQuery con los eventos onclick correspondientes a los botones y los métodos asociados a cada acción:
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $("#on").click(function(){ $("#Cuadrado").animate({left: "500px", height: "200px", width: "200px"},5000); }); $("#off").click(function(){ $("#Cuadrado").stop(); }); }); |
Como veis al pulsar el botón “Animar” asociamos al selector del cuadrado el método animate el cual como parámetros le pasamos, de entre muchas opciones posibles, que se desplace desde la izquierda 500px y angrande su tamaño de ancho y alto a 200px. Todo ello, como podéis observar en el segundo parámetro, en 5000 milisegundos. Al pulsar el botón “Parar” hacemos uso del método stop para parar la animación.
Si la animación no ha terminado y pulsamos de nuevo el botón “Animar” esta seguirá desde donde estaba.
See the Pen QjLbQO by Alfonso Contreras López (@programarfacil) on CodePen.
Veamos otro ejemplo. En el siguiente caso tenemos dos cuadrados con efectos similares salvo el tiempo que tardan en finalizar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <title>Ejemplo animación jQuery</title> <style type="text/css"> #Cuadrado{ width: 100px; height: 100px; background: #2980b9; border-color: #FF622C; border-style: solid; border-radius: 25px; position: relative; } #Cuadrado2{ width: 100px; height: 100px; background: #FF622C; border-color: #2980b9; border-style: solid; border-radius: 25px; position: relative; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="script2.js"></script> </head> <body> <button id="on">Animar</button> <button id="off">Para el primero</button> <button id="off2">Para todo</button> <p> <div id="Cuadrado"></div> <p> <div id="Cuadrado2"></div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function() { $("#on").click(function(){ $("#Cuadrado").animate({left: "500px", height: "200px", width: "200px"},5000); $("#Cuadrado2").animate({left: "500px", height: "200px", width: "200px"},10000); }); $("#off").click(function(){ $("#Cuadrado").stop(); }); $("#off2").click(function(){ $("*").stop(); }); }); |
Como veis también hemos añadido un botón más. El botón “Animar” anima los dos cuadrados y el siguiente botón para solo el primer cuadrado. Hasta aquí el ejemplo es igual que el anterior, pero en el tercero vemos la diferencia. Como podéis apreciar cuando ejecutamos el evento de este botón asociamos el método stop a todos los elementos de nuestra página mediante el selector “*”. Con esta instrucción pararíamos todas las animaciones que hubieran en nuestra página:
See the Pen MagwMZ by Alfonso Contreras López (@programarfacil) on CodePen.
