Свойство отображения Javascript не работает

var myVar;

function team_hover() {
  var a = document.getElementById("gl1");
  var b = document.getElementById("gl2");
  clearInterval(myVar); // Needed here
  myVar = setInterval(opac, 20);
  var i = 0;

  function opac() {
    i = i + 0.1;
    a.style.opacity = 1 - i;
    if (i >= 1) {
      a.style.display = "none";
      b.style.display = "block";

      clearInterval(myVar); // Performance gain
    } else {}
  }
}

function team_hover_bbye() {
  clearInterval(myVar); // Real fix
  var i = document.getElementById("gl1");
  var j = document.getElementById("gl2");
  i.style.opacity = 1;
  i.style.display = "block";
  j.style.display = "none";
}

team_hover_bbye();

#gl1, #gl2 { display: inline-block; width: 2em; height: 2em; margin: 0.5em; }
#gl1 { background: #F00; }
#gl2 { background: #0F0; }

<div id = "gl1" onmouseenter = "team_hover()"></div>
<div id = "gl2" onmouseout = "team_hover_bbye()"></div>