0

I have this element, which is of black color initially:

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

And then, I'm trying to make it gradually fade in to rgba(255, 255, 255, 1). However, using a simple for from 1 to 255 makes it instantly go white, and what I want is something that would last at least half a second, so I tried this:

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);
}

which doesn't seem to work either, as the colorDot function will return immediately, and the next iteration will execute. Any way I could make this work?

iuliu.net
  • 6,666
  • 6
  • 46
  • 69
  • Try the other post :) – Andrew Li May 25 '16 at 16:24
  • Search recursive settimeout – agustin May 25 '16 at 16:24
  • 2
    It's not a direct answer to your question, but you might want to look at CSS transitions. – James Thorpe May 25 '16 at 16:26
  • So yes, in some superficial sense this is a duplicate. But it's more important to realize that the whole notion of writing your own poor man's transition logic in 2016 is ridiculous. As another comment mentioned, CSS transitions will solve this problem and many others. What CSS transitions can't help with, CSS animations can. –  May 25 '16 at 16:33

0 Answers0