为什么我的jQuery fadeOut不起作用?

时间:2015-07-19 20:34:26

标签: javascript jquery

我无法弄清楚它有什么问题..它以前工作正常,我现在没有改变它让它破坏.. 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");
});

1 个答案:

答案 0 :(得分:1)

我不完全确定你要做什么,但是评论所有xxx-transition属性会使文字淡出。

查看更正后的pen