在页面之间导航时页面淡出有时仅适用

Question

我正在尝试让页面快速变淡为黑色，然后在站点内导航时淡入。下面的代码位于body标签的开头。

我已经尝试了一些教程和一些关于SO的建议解决方案，这是到目前为止我最接近的：

$('body').css('display','none');
       $(document).ready(function() {
          $('body').fadeIn();
          $('a').on('click', function(event) {
          var theTarget = this.getAttribute('target')
          if (theTarget != "_blank") {
             var thehref = this.getAttribute('href')
    	 event.preventDefault();
    	 $('body').fadeOut(function() {
    	    window.location = thehref
    	    alert(href)
    	 });
           }
          });
       });
       setTimeout(function() {
          $('body').fadeIn();
       },1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

会弹出一个警告框，其中包含刚刚单击的href，并且页面淡出了我的期望。 但是当我注释掉警报时，页面根本不会淡出，只是正常浏览到所单击的页面。

这让我想知道.preventDefault()方法是否未正确调用或在正确的时间正确调用，但事实证明，反复试验没有效果。