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

Question

I can't figure out whats wrong with it.. it worked fine before, I don't now what I changed to make it break.. The jQuery should be correct and the cdn works as well..

check my pen: http://codepen.io/mathiasvanderbrempt/pen/oXMJRr

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");
});

Answer 1

I'm not entirely sure what you're trying to do but commenting out all the xxx-transition properties makes the text fade.

See corrected pen