如何在Javascript循环中重新绘制HTML元素？

Question

我有一些Javascript"动画"HTML元素的颜色变化,如下所示:

var element = document.getElementById("someid");
while (i < 255) {
    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';
    i++;
    slowMeDown(); // This function runs for a few ms to slow the process down
}

正如您所看到的,这会将颜色从黑色更改为白色,通过其间的255个灰色阴影.我想让它明显"淡化",以便用户可以看到文字逐渐消失.

但是,浏览器(Chrome和IE - 尚未在Firefox上测试)仅在功能结束时刷新,因此颜色从黑色变为白色.有没有人知道如何在循环中重新浏览浏览器,以便我可以看到文本淡出？

Answer 1

function changeColor()
{
    changeColorIncremental(0);
}

function changeColorIncremental(i)
{
    var element = document.getElementById("someid");

    element.style.color = 'rgb(' + i + ',' + i + ',' + i + ')';

    if (i < 255) {
        // Note the 50 millisecond wait below.  Decrease this to speed up
        // the transition, and increase it to slow it down.
        setTimeout('changeColorIncremental(' + (i + 1) + ')', 50);
    }
}