Question

In our page,we often use the javascript based animation to make the element move/resize,most of them use the setTimeout or setInterval to change the position or size of the element:

For example:

function open() {
  var w=parseInt(foo.style.width);
  if(w>=200) clearTimeout(t);
  else{
    foo.style.width = +1+'px';
    t=setTimeout(open,20); // call doMove in 20msec
  }

}

function init() {
  foo = document.getElementById('dv'); // get the "foo" object
  foo.style.width = '0px'; // set its initial position to 0px
  open(); // start animating
}

The above code want to show the div#foo slowly,but as you see,I set the maxwidth of the div to 200px to stop the animation.

But how about if the real size of the content div should more than 200?

That’s to say I can not get the final width of the element.

What is the general solution?

Here is the live exmple:

Answer 1

Use the modified code as shown below. It will continue expanding until the element has reached its full width.

function open() { //See comment at OP
    var w = foo.offsetWidht; // offsetWidht NOT style.width
    var realWidth = foo.scrollWidth;
    if(w < 200 || w < realWidth) {
        foo.style.width = +1+'px';
        setTimeout(open, 20); // call doMove in 20msec
    }
}

Also, you don’t need clearTimeout, since no timeout has been set when the function is called again.