为什么我的jQuery fadeOut无法正常工作？

问题描述

我无法弄清楚它出了什么问题..以前效果很好，我现在不更改它以使其崩溃.. jQuery应该是正确的，而CDN也可以。

检查我的笔： :

HTML：

<div class="header">
  <p class="covertxt">INTERIEURINRICHTING <br> & SCHRIJNWERKERIJ</p>
</div>

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

CSS：

.header {
  background:#333;
  z-index: 5;
  margin: 0 auto;
  width: 80%;
  max-width: 500px;
  top: 30vh;
    /*absolute centering*/
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
  text-align: center;
  color: #fff;
}

.header img {
  width:100%;
}

.header p {
  font-size: 22px;
  font-family: montserratlight;
  letter-spacing: 0.4em;
  line-height: 1.3em;
  text-transform: capitalize!important;
  cursor: default;
  text-align: center;
  -webkit-transition: all 1.25s ease-in-out;
     -moz-transition: all 1.25s ease-in-out;
      -ms-transition: all 1.25s ease-in-out;
       -o-transition: all 1.25s ease-in-out;
          transition: all 1.25s ease-in-out;
}

jQuery的：

$(document).ready(function() {
  var delay = 3000; //3 seconds
  setTimeout(function() {
    $('.header p').fadeOut(300, function() {
      $(this).text("A LIFESTYLE FOR EVERYONE").fadeIn(300);
    });
  }, delay);

  console.log("replaced");
});