Delay animation jquery

Un_Tico · #1 (**permalink**) 27/11/2008, 13:07

Hola a todos,

tengo una pregunta, tengo un div que contiene a otro, este segundo se anima para que avance hacia la derecha en N segundos, la animación es fácil de hacer, pero lo que necesito es hacer que la animación empiece por ejemplo uno en 1 minuto, otro en 1 segundos y así como va, aquí les pongo lo que llevo

Código HTML:

<body>
<div style="width:500px;height:20px;background:#999900;margin-left:100px" id="trayecto">
<div style="width:20px;height:20px;background:#666666;margin-left:30%;" id="helicopter">
</div>

así se animan todos apenas carga la pagina

Código:

$(document).ready(function(){
	$("#helicopter").animate({marginLeft:"100%"},3000);
});

Así se animan 10 segundos despues

Código:

function anima(){
	$("#helicopter").animate({marginLeft:"100%"},3000);
}
$(document).ready(function(){
	setTimeout("anima()",10000);	
});

En resumen necesito que las animaciones empiecen en tiempos distintos dándoles un delay, espero que me haya explicado bien.

Saludos...

marcopoloaz06 · #2 (**permalink**) 27/11/2008, 23:25

Hola, si no es lo que te puse, explicate mejor porfa:

Código javascript:

Ver originalfunction anima( v, t, fnc ){
    $("#helicopter").animate({marginLeft:v},t,fnc || function(){} );
}
$(document).ready(function(){
    setTimeout(function(){
        anima( "100%", 3000 ,function(){
            setTimeout(function(){
                anima( "0%", 2000, function(){
                    setTimeout(function(){
                        anima("100%", 1000);
                    }, 1000);
                });
            }, 2000);
        });
    }, 2000);
});

saludos
:]

Un_Tico · #3 (**permalink**) 28/11/2008, 11:25

Hola marcopoloaz06 gracias por responder,

mira te explico:

Los divs los imprimo con php, lo que necesito es que la animacion de cada $(".helicopter") enpiese segun un valor que viene de la base de datos, algo como asi:

Código HTML:

<div style="width:500px;height:20px;background:#999900;margin-left:100px" id="trayecto">
<div style="width:20px;height:20px;background:#666666;margin-left:30%;" id="helicopter" delay="3000" duracion_animacion="10000">
</div>

Asi entonces usar algo como así:

Código:

$(".helicopter").delay( $(this).attr("delay") ).animate({marginLeft:"100%"}, $(this).attr("duracion_animacion"));

.delay() es una funcion que me inventé para dar la idea :P

Asi todos los elementos que tengan class="helicopter" se muevan segun sus valores...

Espero me alla explicado mejor...

Gracias y saludos....

marcopoloaz06 · #4 (**permalink**) 28/11/2008, 11:43

Hola de nuevo, entonces supongo que tu funcion es esta:

Código javascript:

Ver original// función
$.fn.delay = function( value ){
    return setTimeout( function(){ $(this).animate( value || {}, $(this).attr("duracion_animacion") ) }, $(this).attr("delay") );
};
// utilizando función
$(".helicopter").delay( {marginLeft:"100%"} );

asi la usas no?
:]

Un_Tico · #5 (**permalink**) 28/11/2008, 12:48

Hola de nuevo marcopoloaz06 gracias por la ayuda.

Veo la idea de tu funcion y está perfecta para lo que yo quiero, pero por razones que no encuentro la animacion no empieza

te paso este link para que veas que pasa :S

Nota que hice un delay2 con una modificacion, en la cual la animacion funciona pero no hace la pausa

Gracias de nuevo y Saludos...

marcopoloaz06 · #6 (**permalink**) 28/11/2008, 15:05

Hola, de nuevo ya esta perdon ahora si:

Código javascript:

Ver original$.fn.delay = function( value, fnc ){
    var fnc = fnc || function(){};
    var $this = this;
    return setTimeout(function(){
        $($this).animate( value || {}, Number( $($this).attr("duracion_animacion") ), function(){fnc.call($this);} );
    }, Number( $(this).attr("delay") ) );
};
//
$(document).ready(function(){
    $("div").delay( {marginLeft:"100%"}, function(){ alert("listo"); } );
});

perdon xd
:)

Un_Tico · #7 (**permalink**) 28/11/2008, 15:46

Hola de nuevo marcopoloaz06 gracias por la ayuda pero tu funcion sigue sin funcionar, ahora hace la animacion pero no hace la pausa :S yo hice esto:

Código:

function anime(key,ti_ani){
	$("#hl_"+key).animate({marginLeft:"100%"},ti_ani);
}
$(document).ready(function(){
	$(".helicopter").each(function(i){
		$(this).attr("id","hl_"+i);
		setTimeout("anime("+i+","+$(this).attr("duracion_animacion")+")",$(this).attr("delay"));
	});
});

puedes ver el resultado de mi funcion aqui para que veas a lo que me referia, aunque quisiera ver si hechas a andar la tuya es mas elegante, como vez lo que hice fue darle id en el vuelo a los divs y animarlos.

aqui pongo la tuya para que veas la diferencia....

Gracias, espero tu respuesta....

Saludos...

marcopoloaz06 · #8 (**permalink**) 28/11/2008, 19:27

Hola de nuevo chaaa muchos problemas con la funcion pero ahora si ya la probe con tus ejemplos y no me dio ningun error, espero que tambien la pruebes, bueno ahora si ahi vaaa la chida: xd

Código javascript:

Ver original// función
$.fn.delay = function( value, fnc ){
    var fnc = fnc || function(){};
    return this.each(function(){
        var $this = this;
        return setTimeout(function(){
            $($this).animate( value || {}, Number( $($this).attr("duracion_animacion") ), function(){fnc.call($this);} );
        }, Number( $(this).attr("delay") ) );
    });
};
// pruebaz
$(document).ready(function(){
    $(".helicopter").delay( {marginLeft:"100%"}, function(){
        alert( $(this).attr("class") );
    });
    $(".helicopter3").delay( {marginLeft:"100%"}, function(){
        alert( $(this).attr("class") );
    });
});

html:

Código HTML:

<div style="width:500px;height:20px;background:#999900;margin-left:100px" id="trayecto1">
<div style="width:20px;height:20px;background:#666666;margin-left:-20px;" class="helicopter" delay="1000" duracion_animacion="20000">
</div>
</div>
<div style="width:500px;height:20px;background:#999900;margin-left:100px" id="trayecto2">

<div style="width:20px;height:20px;background:#666666;margin-left:-20px;" class="helicopter" delay="5000" duracion_animacion="5000">
</div>
</div>
<div style="width:500px;height:20px;background:#999900;margin-left:100px" id="trayecto3">
<div style="width:20px;height:20px;background:#666666;margin-left:-20px;" class="helicopter3" delay="4000" duracion_animacion="3000">
</div>
</div>

http://polopolomp.6te.net/pruebajQ.html
y perdon por tardarme pero esque luego luego que te conteste la otra me sali

:]

#9 (**permalink**) 29/11/2008, 04:48

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.

Un_Tico · #10 (**permalink**) 01/12/2008, 08:59

Hola de Nuevo y gracias por contestar,

Exelente la funcion marcopoloaz06 funciona genial, casi que llegamos a la misma solucion por caminos diferentes, este fin de semana trabajé en mi funcion y me quedó casi la misma, Igual gracias por tu ayuda me sirvió de mucho.

Ahora tambien gran Truco el de Opacity de venkman muy practico, Exelente.

Gracias Muchachos

Saludos....