Expand the width of an element with a setTimeOut loop

Vote count:

0

I am trying to create a simple javascript animation that will expand the width of an element from 0px to a specified width. Although this is probably a pretty elementary problem for some, I just can't seem to figure out what I am doing wrong. Instead of the loop running and expanding the div as desired I am only able to expand the div by repeatedly firing the function manually.

Fiddle

Current js code:

  var el = document.getElementById('h');
var btn = document.getElementById('button1');
var oswidth = el.offsetWidth;
var target_width = 100;


btn.onclick = function grow() {
    var loop = setTimeout('grow(\'' + el + '\')', 20);
    if (oswidth < target_width) {
        oswidth += 5;
    } else {
        clearTimeout(loop);
    }
    el.style.width = oswidth + 'px';
 }

And as always, thank you in advance!

asked 17 secs ago

Austin737

3

Expand the width of an element with a setTimeOut loop