Функция наведения курсора повторяется всякий раз, когда вы перемещаете мышь внутри селектора

В соответствии с вашим кодом вы вызываете обе анимации в одно и то же событие hover, или, скажем, вы пытаетесь анимировать его в одно и то же событие mouseenter и mouseleave. Вместо этого попробуйте что-нибудь вроде этого.

    $('#nav, #footer, #leftNav, #rightNav').mouseenter(function() {
console.log("mouseenter");
  $('#navFill').animate({
    left: 0
  }, 300);
  $('#footerFill').animate({
    left: 0
  }, 300);
  $('#leftNavFill').animate({
    top: 0
  }, 300);
  $('#rightNavFill').animate({
    top: 0
  }, 300);
});


$('#navFill, #footerFill, #leftNavFill, #rightNavFill').mouseleave(function() {
console.log("mouseleave");
  $('#navFill').animate({
    left: '-100vw'
  }, 300);
  $('#footerFill').animate({
    left: '100vw'
  }, 300);
  $('#leftNavFill').animate({
    top: '100vh'
  }, 300);
  $('#rightNavFill').animate({
    top: '-100vh'
  }, 300);
});

#nav {
  background-color: rgba(86, 55, 144, 0.95);
  width: 100vw;
  height: 7.5vh;
  z-index: 10;
  box-shadow: 0px 2px 3px #000;
  position: fixed;
}

#navBars {
  position: absolute;
  left: 5vw;
  transform: scaleY(.75);
  line-height: 7.5vh;
  cursor: pointer;
  color: #f0f0f0;
}

#navigation {
  margin-left: 10vw;
}

.navigation {
  display: inline;
  position: relative;
  left: -3vw;
  margin-left: 3vw;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 7.5vh;
  cursor: pointer;
  color: #f0f0f0;
}

#leftNav {
  height: 100vh;
  width: 2vw;
  background-color: rgba(86, 55, 144, 1);
  position: fixed;
  z-index: 11;
  box-shadow: 2px 0px 3px #000;
}

#rightNav {
  height: 100vh;
  width: 2vw;
  left: 98vw;
  background-color: rgba(86, 55, 144, 1);
  position: fixed;
  z-index: 11;
  box-shadow: -2px 0px 3px #000;
}

#footer {
  background-color: rgba(86, 55, 144, 0.95);
  width: 100vw;
  height: 5vh;
  top: 95vh;
  z-index: 10;
  box-shadow: 0px -2px 3px #000;
  position: fixed;
}

#navFill {
  background-color: rgba(240, 240, 240, .95);
  width: 100vw;
  left: -100vw;
  height: 7.5vh;
  z-index: 10;
  position: fixed;
}

#footerFill {
  background-color: rgba(240, 240, 240, .95);
  width: 100vw;
  left: 100vw;
  top: 95vh;
  height: 5vh;
  z-index: 10;
  position: fixed;
}

#leftNavFill {
  height: 100vh;
  width: 2vw;
  background-color: rgba(240, 240, 240, 1);
  top: 100vh;
  position: fixed;
  z-index: 11;
  box-shadow: 2px 0px 3px #000;
}

#rightNavFill {
  height: 100vh;
  width: 2vw;
  left: 98vw;
  background-color: rgba(240, 240, 240, 1);
  top: -100vh;
  position: fixed;
  z-index: 12;
  box-shadow: 2px 0px 3px #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
  <i class="fa fa-bars fa-3x" id="navBars"></i>
  <ul id="navigation">
    <li id="homeNav" class="navigation">Home</li>
    <li id="aboutNav" class="navigation">About</li>
    <li id="portNav" class="navigation">Portfolio</li>
    <li id="contactNav" class="navigation">Contact</li>
  </ul>
</nav>
<div id="leftNav"></div>
<div id="rightNav"></div>
<footer id="footer">

</footer>
<div id="leftNavFill"></div>
<div id="rightNavFill"></div>
<div id="navFill"></div>
<div id="footerFill"></div>

Вот обновленная Скрипка

А также, как только мышь входит в div, вы анимируете navFill и другие, которые не являются теми же подразделениями, к которым привязано событие mousenter. Итак, событие mouseleave выполняется одновременно из-за анимации, которая вызывает анимацию div и, таким образом, событие mouseleave выполняется.