Pausa con JavaScript (Animacion)

[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