title: setTimeout executes itself, but not its function: css.("background-color")
body: <p>I have the following function:</p>
  
  <pre><code>function render(data){
    nodes = data.nodes;
    for(i=0; i&lt;nodes.length; i++){
      ...
      let originalColor = $("#"+i).css("background-color")
      ...
      setTimeout(()=&gt;{$("#"+i).css("background-color", originalColor)}, 1000)
    }
  }
  </code></pre>
  
  <p>Now, I have tried printing something inside this setTimeout, and it works!, which means it's being actually called, however, the css effect it not working.</p>
  
  <p>Any clues?!</p>
  
  <p>Notes:</p>
  
  <ul>
  <li>I am sure the dotted(skipped) code has no effect on the function. </li>
  <li>I am also sure that the DOM element is being selected correctly.</li>
  <li>I have tried many stackOverFlow solutions before posting this, non of them seemed to work :(</li>
  <li>I am sure that the "originalColor is a valid rgb() value.</li>
  </ul>
  
  <p>Full function upon request:</p>
  
  <pre><code>function render(data){
    nodes = data.nodes;
    for(i=0; i&lt;nodes.length; i++){
      $("#"+i).css("background-color", ()=&gt;{
        return nodes[i]["color"]=="Blue"? "dodgerblue" : "red";
      })
      let originalArmies = $("#"+i).text()
      $("#"+i).text(nodes[i]["armies"])
      if(originalArmies != $("#"+i).text()){
        let originalColor = $("#"+i).css("background-color")
        $("#"+i).css("background-color", "yellow")
        setTimeout(()=&gt;{$("#"+i).css("background-color", originalColor)}, 1000)
      }
    }
  }
  </code></pre>