有没有办法延迟for循环的迭代？

Question

我有这个元素，最初是黑色的：

<div class="dot"></div>

然后，我试图让它逐渐淡入rgba(255, 255, 255, 1)。但是，使用1到255之间的简单for会立即变为白色，而我想要的东西会持续至少半秒，所以我尝试了这个：

for (var i = 0; i <= 255; i++) {
  colorDot(i, i, i);
}

function colorDot(r, g, b) {
  setTimeout(function() {
    $(".dot").css("background-color", "rgba("+r+","+g+","+b+", 1)");
  }, 10);
}

似乎也不起作用，因为colorDot函数将立即返回，并且下一次迭代将执行。我能以任何方式使这项工作？