为什么我的jQuery淡出不工作

Why is my jQuery fadeOut not working?

本文关键字:工作 淡出 jQuery 我的 为什么      更新时间:2023-09-26

我不知道它有什么毛病。它以前工作得很好,我不知道我改变了什么,使它坏了。jQuery应该是正确的,cdn也可以正常工作。

检查我的笔: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");
});

我不完全确定你想做什么,但注释掉所有的xxx-transition属性使文本褪色。

见更正笔