Foros del Web » Programando para Internet » Jquery »

Delay animation jquery

Estas en el tema de Delay animation jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/11/2008, 13:07
Avatar de Un_Tico  
Fecha de Ingreso: julio-2008
Ubicación: Cartago, Costa Rica
Mensajes: 176
Antigüedad: 11 años, 6 meses
Puntos: 4
Delay animation jquery

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...
  #2 (permalink)  
Antiguo 27/11/2008, 23:25
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 12 años, 5 meses
Puntos: 11
Respuesta: Delay animation jquery

Hola, si no es lo que te puse, explicate mejor porfa:
Código javascript:
Ver original
  1. function anima( v, t, fnc ){
  2.     $("#helicopter").animate({marginLeft:v},t,fnc || function(){} );
  3. }
  4. $(document).ready(function(){
  5.     setTimeout(function(){
  6.         anima( "100%", 3000 ,function(){
  7.             setTimeout(function(){
  8.                 anima( "0%", 2000, function(){
  9.                     setTimeout(function(){
  10.                         anima("100%", 1000);
  11.                     }, 1000);
  12.                 });
  13.             }, 2000);
  14.         });
  15.     }, 2000);
  16. });

saludos
:]
__________________
Aerolíneas Alicia :D
  #3 (permalink)  
Antiguo 28/11/2008, 11:25
Avatar de Un_Tico  
Fecha de Ingreso: julio-2008
Ubicación: Cartago, Costa Rica
Mensajes: 176
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Delay animation jquery

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....
  #4 (permalink)  
Antiguo 28/11/2008, 11:43
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 12 años, 5 meses
Puntos: 11
Respuesta: Delay animation jquery

Hola de nuevo, entonces supongo que tu funcion es esta:
Código javascript:
Ver original
  1. // función
  2. $.fn.delay = function( value ){
  3.     return setTimeout( function(){ $(this).animate( value || {}, $(this).attr("duracion_animacion") ) }, $(this).attr("delay") );
  4. };
  5. // utilizando función
  6. $(".helicopter").delay( {marginLeft:"100%"} );

asi la usas no?
:]
__________________
Aerolíneas Alicia :D
  #5 (permalink)  
Antiguo 28/11/2008, 12:48
Avatar de Un_Tico  
Fecha de Ingreso: julio-2008
Ubicación: Cartago, Costa Rica
Mensajes: 176
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Delay animation jquery

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...
  #6 (permalink)  
Antiguo 28/11/2008, 15:05
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 12 años, 5 meses
Puntos: 11
Respuesta: Delay animation jquery

Hola, de nuevo ya esta perdon ahora si:
Código javascript:
Ver original
  1. $.fn.delay = function( value, fnc ){
  2.     var fnc = fnc || function(){};
  3.     var $this = this;
  4.     return setTimeout(function(){
  5.         $($this).animate( value || {}, Number( $($this).attr("duracion_animacion") ), function(){fnc.call($this);} );
  6.     }, Number( $(this).attr("delay") ) );
  7. };
  8. //
  9. $(document).ready(function(){
  10.     $("div").delay( {marginLeft:"100%"}, function(){ alert("listo"); } );
  11. });
perdon xd
:)
__________________
Aerolíneas Alicia :D

Última edición por marcopoloaz06; 28/11/2008 a las 15:12
  #7 (permalink)  
Antiguo 28/11/2008, 15:46
Avatar de Un_Tico  
Fecha de Ingreso: julio-2008
Ubicación: Cartago, Costa Rica
Mensajes: 176
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Delay animation jquery

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...

Última edición por Un_Tico; 28/11/2008 a las 15:50 Razón: Los Links van a estar activos por algún tiempo, Sorry :P
  #8 (permalink)  
Antiguo 28/11/2008, 19:27
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 12 años, 5 meses
Puntos: 11
Respuesta: Delay animation jquery

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
  1. // función
  2. $.fn.delay = function( value, fnc ){
  3.     var fnc = fnc || function(){};
  4.     return this.each(function(){
  5.         var $this = this;
  6.         return setTimeout(function(){
  7.             $($this).animate( value || {}, Number( $($this).attr("duracion_animacion") ), function(){fnc.call($this);} );
  8.         }, Number( $(this).attr("delay") ) );
  9.     });
  10. };
  11. // pruebaz
  12. $(document).ready(function(){
  13.     $(".helicopter").delay( {marginLeft:"100%"}, function(){
  14.         alert( $(this).attr("class") );
  15.     });
  16.     $(".helicopter3").delay( {marginLeft:"100%"}, function(){
  17.         alert( $(this).attr("class") );
  18.     });
  19. });
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

:]
__________________
Aerolíneas Alicia :D

Última edición por marcopoloaz06; 28/11/2008 a las 19:40 Razón: pruebaaaa
  #9 (permalink)  
Antiguo 29/11/2008, 04:48
venkman
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Delay animation jquery

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
  1. $(document).ready(function(){
  2.     $("#helicopter").animate({marginLeft:"100%"},3000)
  3.                     .animate({marginLeft:"0%"},2000)
  4.                     .animate({marginLeft:"100%"},1000);
  5. });

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
  1. $(document).ready(function(){
  2.     $("#helicopter").animate({opacity:"100%"},2000)
  3.                     .animate({marginLeft:"100%"},3000)
  4.                     .animate({opacity:"100%"},3000)
  5.                     .animate({marginLeft:"0%"},2000)
  6.                     .animate({opacity:"100%"},1000)
  7.                     .animate({marginLeft:"100%"},1000);
  8. });

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
  1. $(document).ready(function(){
  2.     $("#helicopter").animate({opacity:"100%"},2000)                                  // esperamos 2 segundos
  3.                     .animate({marginLeft:"100%"},3000)                               // movemos el helicóptero
  4.                     .animate({opacity:"100%"},3000, function() {                     // esperamos 3 segundos
  5.                         $("#plane").animate({marginLeft:"0%"},2000)                  // movemos el avión
  6.                                    .animate({opacity:"100%"},1000, function() {      // esperamos 1 segundo
  7.                                        $("#boat").animate({marginLeft:"100%"},1000); // movemos el barco
  8.                                    });
  9.                     });
  10. });


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.
  #10 (permalink)  
Antiguo 01/12/2008, 08:59
Avatar de Un_Tico  
Fecha de Ingreso: julio-2008
Ubicación: Cartago, Costa Rica
Mensajes: 176
Antigüedad: 11 años, 6 meses
Puntos: 4
Respuesta: Delay animation jquery

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....
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:01.