jQuery - 淡入速度不起作用

Question

我有一个动画，其中标题淡出然后一些内容淡入，不过我在动画速度方面遇到了一些问题。

无论我做什么我都无法改变 fadeIn 方法的速度效果？除此之外，动画效果完美。似乎无法弄清楚 - 有什么想法吗？

$(document).ready(function() {
  $('.aboutQuery').click(function() {
    $('.mySec').fadeOut('slow', function() {
      $('.aboutText').fadeIn(5000);
    })
  })
})

.mySec {
  display: block;
  position: relative;
  height: calc(95vh);
  width: calc(96vw - 1vh);
  transform: translate(calc((4vw + 1vh) / 2), 2.5vh);
  overflow: hidden;
}

.aboutText {
  padding-left: 5vw;
  padding-right: 5vw;
  font-size: 2vw;
  white-space: pre-line;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="header">
  <ul id="headList">
    <li>
      <a class="aboutQuery" id="link" href="#">ABOUT</a>
    </li>
    <li>
      <a id="link" href="#">CLASSES</a>
    </li>
    <li>
      <a id="link" href="#">CONTACT</a>
    </li>
  </ul>
  <div class="mySec">
    <div class="info">
      <h1 class="title">Niki Gibbs Modern Pilates</h1>
      <p class="title2">Working From The Inside Out.</p>
      <img id="pilLogo" src="pilatesLog.png">
    </div>
  </div>
  <div class="aboutSec">
    <div class="aboutInfo">
      <p class="aboutText">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
  </div>
</div>

Answer 1

您没有先隐藏关于文本。您需要将 display:none 添加到您的 CSS 规则中:

.aboutText {
  padding-left: 5vw;
  padding-right: 5vw;
  font-size: 2vw;
  white-space: pre-line;
  display:none;
}

$('.aboutQuery').click(function() {
    $('.mySec').fadeOut('slow', function() {
      $('.aboutText').fadeIn(5000);
    })
  })

.mySec {
  display: block;
  position: relative;
  height: calc(95vh);
  width: calc(96vw - 1vh);
  transform: translate(calc((4vw + 1vh) / 2), 2.5vh);
  overflow: hidden;
}

.aboutText {
  padding-left: 5vw;
  padding-right: 5vw;
  font-size: 2vw;
  white-space: pre-line;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <ul id="headList">
    <li>
      <a class="aboutQuery" id="link" href="#">ABOUT</a>
    </li>
    <li>
      <a id="link" href="#">CLASSES</a>
    </li>
    <li>
      <a id="link" href="#">CONTACT</a>
    </li>
  </ul>
  <div class="mySec">
    <div class="info">
      <h1 class="title">Niki Gibbs Modern Pilates</h1>
      <p class="title2">Working From The Inside Out.</p>
      <img id="pilLogo" src="pilatesLog.png">
    </div>
  </div>
  <div class="aboutSec">
    <div class="aboutInfo">
      <p class="aboutText">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </p>
    </div>
  </div>
</div>