Animation fondu div

Bonjour,
Actuellement en train de créer un site, je m'attaque a quelques animations

Je voudrais effectuer un fondu sur différent élément pour es faire apparaitre et disparaitre.

Voici mes script:

var	fin = false;
var	fou = false;

function fadeOut(id){
	fin = false;
	fou = true;
 var el = document.getElementById(id);
 //el.style.opacity = 1;
  (function fadeo() {
    if ((el.style.opacity -= .05) < 0) {
		el.style.visibility = "hidden";
    }
	  else if(fou == false){}
	  else {
      requestAnimationFrame(fadeo); 
    }
  })();
}

// fade in

function fadeIn(id){
	fin = true;
	fou = false;
var el = document.getElementById(id);
 //el.style.opacity = 0;
 el.style.visibility="visible";
  (function fadei() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .05) > 1) && fin==true) {
      el.style.opacity = val;
      requestAnimationFrame(fadei);
    }
  })();
}

et en html :

<a href="#detail" rel="nofollow noopener noreferrer" target="_blank" class="button" onMouseOver="javascript:fadeIn('explainroom');document.getElementById('explaintext').innerHTML = 'Test';" onMouseOut="javascript:fadeOut('explainroom')">Salon des victiorieux</a>

 <div id="explainroom" style="visibility: hidden">
      <p id="explaintext">a</p>
    </div>

Le fondu fonctionne et l'affiche du texte est super, mais lorsque je glisse rapidement mon curseur dedans puis dehors, le fondu "plante" et reste sur l'opacité où il en étais.
J'ai portant essayé de crée un système de variable pour faire la rotation "in" "out" mais rien n'y fais.

merci de votre aide !