Everything is going to be a little more complex:
var change = function() {
var div = document.getElementById("div1"),
startWidth = div.offsetWidth;
for (var i = 0; i <= 100; i++) {
(function(i) {
setTimeout(function() {
div.style.width = startWidth + i + 'px';
}, i * 10)
})(i) // wrap setTimeout in a closure
}
};
A couple notes.
1). You need to calculate an initial width. You can use offsetWidth
property for that.
2). Make sure you don't reselect div
element in the loop.
3). You need a closure and setTimeout
for sliding effect. Closure is used to bind a setTimeout with a snapshot (current in a loop) value of the i
variable.
4). In the loop i >= 200
should be i <= 200
.