Fade In setTimeout Function in JS

Ever since jumping back into mathematics by way of homeschooling, as well as reading about it, I was inspired to work on a complex problem. I searched for something to solve that I would really enjoy and I ended up going back to JavaScript. I haven’t written JS in a while. I decided to search some old JS programs in my JSFiddle account and found one I could work on.

This is the program I started with. I want to clean it up. More specifically, I want to simplify the syntax further by consolidating it. I don’t like how each function repeats.

setTimeout(function () {
  document.getElementById("one").className = "";
}, 1000);

setTimeout(function () {
  document.getElementById("two").className = "";
}, 2000);

setTimeout(function () {
  document.getElementById("three").className = "";
}, 3000);

I wasn’t understanding why className = "" was there. I thought I could get rid of it, but when I did, the program didn’t work. So I learned how it works thanks to this post from StackOverflow:

The empty string (current.className = "") is simply a way of removing all CSS classes from the element. So, if the user clicks an element that already has a CSS class (e.g. class="saturate"), that class will be removed, thereby removing the effect.

It’s because className = "" is replacing the current “hidden” class, therefore, making the elements visible again. Once they’re visible, the code is allowed to do its thing.

Here’s my second attempt. I took advantage of constants, which is a good practice. Although I still want to clean up the syntax further.

const x = document.getElementById("one");
const y = document.getElementById("two");
const z = document.getElementById("three");

setTimeout(function () {
  x.className = "";
}, 1000);

setTimeout(function () {
  y.className = "";
}, 2000);

setTimeout(function () {
  z.className = "";
}, 3000);

The following works, but I still don’t like having to write setTimeout(function()) so many times. This is not the right approach.

const x = document.getElementById("one");
const y = document.getElementById("two");
const z = document.getElementById("three");

setTimeout(function () {
  setTimeout(function () {
    z.className = ""; //runs second after 1100ms
  }, 2000);

  setTimeout(function () {
    y.className = "";
  }, 1000);

  x.className = ""; //runs first, after 1000ms
}, 1000);

Here’s another attempt (I got the idea from this answer on Stackoverflow). I like this one much better, because I apply constants and variables. Although I’m still wondering if there’s a better way to write this.

const x = document.getElementById("one");
const y = document.getElementById("two");
const z = document.getElementById("three");

var t1 = setTimeout(function () {x.className = "";}, 1000);
var t2 = setTimeout(function () {y.className = "";}, 2000);
var t3 = setTimeout(function () {z.className = "";}, 3000);

setTimeout(t1, t2, t3);

Here’s the end product on CodePen:.