Foros del Web » Programando para Internet » Javascript »

Pausa con JavaScript (Animacion)

Estas en el tema de Pausa con JavaScript (Animacion) en el foro de Javascript en Foros del Web. Hola amigos que tal, estoy tratando de hacer una animación con javascript, pero no me resulta, y les cuento que he probado con casi todo. ...
  #1 (permalink)  
Antiguo 17/10/2012, 14:09
Avatar de hormix  
Fecha de Ingreso: diciembre-2011
Ubicación: Santiago
Mensajes: 39
Antigüedad: 11 años, 1 mes
Puntos: 1
Pregunta Pausa con JavaScript (Animacion)

Hola amigos que tal, estoy tratando de hacer una animación con javascript, pero no me resulta, y les cuento que he probado con casi todo.

Se trata de un boton, quiero que en el evento onmouseover este crezca animadamente y lo estoy intentando de la siguiente manera:

Este es el boton:
Código HTML:
Ver original
  1. <input value="Boton Animado" name="boton_animado" type="button" onmouseover="animacion(this)">

Y esta es la función:

Código Javascript:
Ver original
  1. function animacion(id)
  2.     {
  3.         for (i=10; i<=100; i++)
  4.         {
  5.             setTimeout(id.style.height=i,100);
  6.         }
  7.     }

Bueno he intentado con varias mas funciones para pausar , colocando el ciclo for fuera de la funcion, etc...

Pero no se muestra la animacion del boton como si fuera creciendo, al contrario se demora y crece completamente en menos de 1 segundo. entonces como podria hacerlo, se puede con javascript?

Gracias.
__________________
Nunca digas nunca, mira siempre adelante, no vivas en el pasado, cree en un dios, no odies por que seras odiado, no comas carne y respeta a los demás.
  #2 (permalink)  
Antiguo 17/10/2012, 14:12
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 14 años, 7 meses
Puntos: 220
Respuesta: Pausa con JavaScript (Animacion)

Cita:
Iniciado por hormix Ver Mensaje
Hola amigos que tal, estoy tratando de hacer una animación con javascript, pero no me resulta, y les cuento que he probado con casi todo.

Se trata de un boton, quiero que en el evento onmouseover este crezca animadamente y lo estoy intentando de la siguiente manera:

Este es el boton:
Código HTML:
Ver original
  1. <input value="Boton Animado" name="boton_animado" type="button" onmouseover="animacion(this)">

Y esta es la función:

Código Javascript:
Ver original
  1. function animacion(id)
  2.     {
  3.         for (i=10; i<=100; i++)
  4.         {
  5.             setTimeout(id.style.height=i,100);
  6.         }
  7.     }

Bueno he intentado con varias mas funciones para pausar , colocando el ciclo for fuera de la funcion, etc...

Pero no se muestra la animacion del boton como si fuera creciendo, al contrario se demora y crece completamente en menos de 1 segundo. entonces como podria hacerlo, se puede con javascript?

Gracias.
Esto deberia ser asi

Código Javascript:
Ver original
  1. var i = 0;
  2. function animacion(id)
  3.     {
  4.         for (i=10; i<=100; i++)
  5.         {
  6.                         id.style.height=i + "px";
  7.             setTimeout(function(){animacion(id);},100);
  8.         }
  9.     }

Ademas debes definir la variable i fuera de la funcion de lo contrario estaras haciendo un bucle infinito
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #3 (permalink)  
Antiguo 17/10/2012, 14:24
Avatar de hormix  
Fecha de Ingreso: diciembre-2011
Ubicación: Santiago
Mensajes: 39
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Pausa con JavaScript (Animacion)

Tampoco me muestra la animacion Dradi7 :(
__________________
Nunca digas nunca, mira siempre adelante, no vivas en el pasado, cree en un dios, no odies por que seras odiado, no comas carne y respeta a los demás.
  #4 (permalink)  
Antiguo 17/10/2012, 14:55
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 14 años, 7 meses
Puntos: 220
Respuesta: Pausa con JavaScript (Animacion)

Discula lo hize tan apurado que no vi como lo estas haciendo la manera de como estas usando la animacion es incorrecta

Primero porque el setTimeOut se ejecuta una sola vez y en esta caso debes usar setInterval

Código Javascript:
Ver original
  1. function animacion(id)
  2. {
  3.     var i = 10;
  4.     var temp = setInterval(function(){
  5.         if(i==100){
  6.             clearInterval(temp);
  7.         }
  8.         id.style.height= i + "px";
  9.         i++;
  10.     },10);
  11. }

Y aumenta mas el tiempo para que la animación se vea fresca y rapida

Saludos
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #5 (permalink)  
Antiguo 17/10/2012, 19:33
Avatar de hormix  
Fecha de Ingreso: diciembre-2011
Ubicación: Santiago
Mensajes: 39
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: Pausa con JavaScript (Animacion)

eheheee :D es justo lo que necesitaba gracias Dradi7 te pasaste, ahora que ya se como hacerlo e realidad mi intención no era que el boton creciera si no que cambiara de color desde el mas oscuro a mas claro, un muy llamativo efecto, comenzaré a trabajar en ello gracias!!
__________________
Nunca digas nunca, mira siempre adelante, no vivas en el pasado, cree en un dios, no odies por que seras odiado, no comas carne y respeta a los demás.

Etiquetas: funcion, input, pausa, botones
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




La zona horaria es GMT -6. Ahora son las 17:29.