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

您不首先隐藏about文本。您需要在CSS规则中添加display:none：

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我想你想要跟随这样的事情：

点击

隐藏aboutText

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

jQuery - 淡入淡出无法正常工作

2 个答案: