Pausa con JavaScript (Animacion)

[hormix]

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:

<input value="Boton Animado" name="boton_animado" type="button" onmouseover="animacion(this)">
 

Y esta es la función:

Código Javascript:

function animacion(id)
    {
        for (i=10; i<=100; i++)
        {
            setTimeout(id.style.height=i,100);
        }
    }
 

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.

[Dradi7]

Iniciado por hormix

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:

<input value="Boton Animado" name="boton_animado" type="button" onmouseover="animacion(this)">
 

Y esta es la función:

Código Javascript:

function animacion(id)
    {
        for (i=10; i<=100; i++)
        {
            setTimeout(id.style.height=i,100);
        }
    }
 

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:

var i = 0;
function animacion(id)
    {
        for (i=10; i<=100; i++)
        {
                        id.style.height=i + "px";
            setTimeout(function(){animacion(id);},100);
        }
    }
 

Ademas debes definir la variable i fuera de la funcion de lo contrario estaras haciendo un bucle infinito

[hormix]

Tampoco me muestra la animacion Dradi7 :(

[Dradi7]

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:

function animacion(id)
{
    var i = 10;
    var temp = setInterval(function(){
        if(i==100){
            clearInterval(temp);
        }
        id.style.height= i + "px";
        i++;
    },10);
}
 

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

Saludos

[hormix]

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