Изменение текста с помощью Fade Javascript несколько раз

let myP = document.querySelector('p');
let titleWords = document.querySelector('a.titleAbout');

titleWords.addEventListener('mouseenter', function(){
    myP.classList.add("fade");
setTimeout(function(){
        myP.innerHTML = "This is my about Me page";
        }, 1000);
setTimeout(function(){
            myP.classList.toggle("fade");
        }, 2000);
    });

titleWords = document.querySelector('a.titleContact');

titleWords.addEventListener('mouseenter', function(){
    myP.classList.add("fade");
setTimeout(function(){
        myP.innerHTML = "This is my Contact page";
        }, 1000);
setTimeout(function(){
            myP.classList.toggle("fade");
        }, 2000);
    });

.fade { 
  animation: fadein 2s;

}
@keyframes fadein {
  from {
    opacity:1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity:1;
  }
}

<a href = "#" class = "titleAbout">About</a>
<a href = "#" class = "titleContact">Contact</a>
<a href = "#" class = "titleHome">Home</a>
<div>
<p>
Welcome to my Website!
</p>
</div>

let myP = document.querySelector('p');

function show(textToShow){
  myP.innerHTML = textToShow;
  myP.classList.add("fade");
}

function hide(){
 myP.classList.remove("fade");
}

.fade { 
  animation: fadein 3s;

}
@keyframes fadein {
  from {
    opacity:1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity:1;
  }
}

<a href = "#" class = "titleAbout" onmouseenter = "show('This is my about Me page')" onmouseout = "hide()">About</a>
<a href = "#" class = "titleContact" onmouseenter = "show('This is my contact Me page')" onmouseout = "hide()">Contact</a>
<a href = "#" class = "titleHome">Home</a>
<div>
<p>
Welcome to my Website!
</p>
</div>

const myPContainer = document.getElementById('pContainer');
const titleWords = document.querySelectorAll('a');
let i;

function attachHandlers(i, elem) {
  let timeoutHandle;
  const pElem = document.createElement('p');
  pElem.innerHTML = elem.getAttribute('title');
  myPContainer.appendChild(pElem);

  elem.addEventListener('mouseenter', function(){
    timeoutHandle = null;
    pElem.classList.add("fadein");
  });

  elem.addEventListener('mouseleave', function(){
    // timeoutHandle = setTimeout(() => {
      pElem.classList.remove("fadein");
    // }, 2000);
  });
  
}

for (i = 0; i < titleWords.length; ++i) {
  attachHandlers(i, titleWords[i]);
}

#pContainer {
  position: relative;
  height: 20px;
}
#pContainer p {
  position: absolute;
  display: block;
  opacity: 0;
}
.fadein { 
  animation: fadein 2s;
  display: block;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<a href = "#" class = "titleAbout" title = "This is my about Me page">About</a>
<a href = "#" class = "titleContact" title = "This is my Contact page">Contact</a>
<a href = "#" class = "titleHome" title = "This is my Home page">Home</a>
<div id = "pContainer"></div>