Плавное изменение ширины ячейки в таблице
 

Уважаемые форумчане, не подскажет ли кто, как решить задачу?

В двух словах суть проблемы: в html-документе есть таблица в которой есть ячейки шириной 100 пикселов каждая. Нужно, чтобы при клике над ячейкой её ширина увеличивалась до 200 пикселов, но не мгновенно (это я сделать смог), а, скажем, за 2 секунды.

В таком скрипте:

document.getElementById('td1').onclick = function () {
for(var i = 100; i < 200; i++) {
this.style.width = i + 'px';
alert(this.style.width);
}

ширина увеличивается на один пиксел каждый раз после вывода alert. Если же убрать alert, то ширина изменится мгновенно. Я так понимаю, что нужно вставить setInterval, но куда - ума не приложу. Как бы ни пытался - ничего не выходит...

Снова я со своим вопросом.

Если написать такой код:

var interval = null;

function more() {
document.getElementById('td1').style.width = (parseInt(document.getElementById('td1').style.wid th) + 1) + 'px';
if(parseInt(document.getElementById('td1').style.w idth) > 300) {
clearInterval(interval);
}
}

interval = setInterval(more, 10);

то ячейка таблицы с id = 'td1' автоматически плавно увеличивает ширину до 300 пикселей. В принципе, как раз то, что мне нужно. Однако хотелось бы, чтобы действие происходило не сразу, а по щелчку мыши, например. Тут возникает проблема - если перед function more() { дописать document.getElementById('td1').onclick = , то ничего не работает... Подскажите пожалуйста, что я делаю не так?

<script type="text/javascript">
var interval = null;

function more() {
document.getElementById('td1').style.width = (parseInt(document.getElementById('td1').style.wid th) + 1) + 'px';
if(parseInt(document.getElementById('td1').style.w idth) > 300) {
clearInterval(interval);
}
}

function ButtonClick() {
interval = setInterval(more, 10);
}
</script>

<table border=1><tr><td style="width:100px" id="td1">текст</td></tr></table><br>

<input type="button" value="Нажми меня!" onclick="ButtonClick()">

mouse web, спасибо за помощь!)