Por cierto, hay un pequeño
truco que se puede usar para evitar tener que estar usando Timeouts. Lo comento como otra alternativa, nada más.
Básicamente de lo que se trata es de lo siguiente. Partimos de la animación sin pausas que queremos hacer:
Código javascript
:
Ver original$(document).ready(function(){
$("#helicopter").animate({marginLeft:"100%"},3000)
.animate({marginLeft:"0%"},2000)
.animate({marginLeft:"100%"},1000);
});
Es decir, queremos primero animar de un elemento #helicopter el margen a 100% en 3 segundos, luego volverlo a 0% en 2 segundos y finalmente volverlo a 100% en 1 segundo.
Ahora lo que queremos
de verdad es que haya unas pausas. Queremos que antes de todo se espere 2 segundos. Que luego cuando llegue al 100% se espere otros 3 segundos antes de empezar a disminuir; y finalmente que cuando llegue a 0% se espere otro segundo antes de volver a moverse.
Pues bien, hay un truco... no es un truco muy elegante, pero tampoco es demasiado sucio... juzgad vosotros mismos. La idea es esta:
Código javascript
:
Ver original$(document).ready(function(){
$("#helicopter").animate({opacity:"100%"},2000)
.animate({marginLeft:"100%"},3000)
.animate({opacity:"100%"},3000)
.animate({marginLeft:"0%"},2000)
.animate({opacity:"100%"},1000)
.animate({marginLeft:"100%"},1000);
});
Lo que hacemos es insertar una animación que sabemos que no va a hacer nada. En este caso supongo que el elemento tiene una opacidad 100% ya de partida, que es completamente visible. Entonces, si lo animo a opacidad 100% durante 3 segundos, lo que hace es quedarse ahí 3 segundos en los que aparentemente no hace nada.
No hace falta que sea opacity: 100%, sólo algo que sepamos que no afecta realmente.
EL ejemplo que he puesto es para animar 1 elemento, pero igualmente se puede usar para animar varios con pausas entre ellos:
Código javascript
:
Ver original$(document).ready(function(){
$("#helicopter").animate({opacity:"100%"},2000) // esperamos 2 segundos
.animate({marginLeft:"100%"},3000) // movemos el helicóptero
.animate({opacity:"100%"},3000, function() { // esperamos 3 segundos
$("#plane").animate({marginLeft:"0%"},2000) // movemos el avión
.animate({opacity:"100%"},1000, function() { // esperamos 1 segundo
$("#boat").animate({marginLeft:"100%"},1000); // movemos el barco
});
});
});
En fin, no sé si os servirá mucho para esta caso o no. Sólo lo comentaba como una alternativa que he usado alguna vez para evitar tener que estar usando Timeouts, que siempre son más engorrosos.