jQuery无效的顺序淡入效果

Question

我试图为我的目标网页制作自己的介绍。有什么我想念或什么？我的页面除了黑屏外没有显示任何内容。

$(function() {
  var welcomeSection = $('.welcome-section'),
    enterButton = welcomeSection.find('.enter-button');

  setTimeOut(function() {
    welcomeSection.removeClass('content-hidden');
  }, 800);

  enterButton.on('click', function(e) {
    e.preventDefault();
    welcomeSection.addClass('content-hidden').fadeOut();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="welcome-section content-hidden">
  <div class="content-wrap">
    <ul class="fly-in-text">
      <li>H</li>
      <li>E</li>
      <li>L</li>
      <li>L</li>
      <li>O</li>
    </ul>
    <a href="#" class="enter-button">ENTER</a>
  </div>
</div>

Answer 1

JavaScript中没有setTimeout函数。请尝试使用$(function() { var welcomeSection = $('.welcome-section'), enterButton = welcomeSection.find('.enter-button'), greating = $('.content-wrap'); enterButton.on('click', function(e) { e.preventDefault(); greating.fadeIn(); }) });。请记住，Java Script 区分大小写。

＆＃13;

＆＃13;

.welcome-section {
  font-family: Arial;
  font-size: 14px;
}

.hidden {
  display: none;
}

.fly-in-text {
  list-style-type: none;
  margin: 10px 0;
  padding: 0;
}

.fly-in-text li {
  display: block;
  text-align: center;
  height: 30px;
  line-height: 30px;
  width: 30px;
  background: #c00;
  color: #fff;
  margin-bottom: 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="welcome-section">
  <a href="#" class="enter-button">ENTER</a>
  <div class="content-wrap hidden">
    <ul class="fly-in-text">
      <li>H</li>
      <li>E</li>
      <li>L</li>
      <li>L</li>
      <li>O</li>
    </ul>
  </div>
</div>

＆＃13;

render () {
 const sideBar = <SideBar onRest={this.changeToRest} test="12" />
    return (
      <Drawer ref={ref => (this.drawer = ref)} content={sideBar}>
....

＆＃13;

＆＃13;

＆＃13;

Answer 2

您也可以逐个为字母设置动画：

＆＃13;

＆＃13;

var showLetters = function () {
  var letter = $('.fly-in-text').find('li');

  letter.each(function(i) {
    $(this).delay(200*i).fadeIn("show");
  });
}

$('.enter-button').on('click', showLetters);

＆＃13;

.welcome-section {
  font-family: Arial;
  font-size: 14px;
}

.fly-in-text {
  list-style-type: none;
  margin: 10px 0;
  padding: 0;
}

.fly-in-text li {
  text-align: center;
  height: 30px;
  line-height: 30px;
  width: 30px;
  background: #c00;
  color: #fff;
  margin-bottom: 1px;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="welcome-section">
  <a href="#" class="enter-button">ENTER</a>
  <div class="content-wrap">
    <ul class="fly-in-text">
      <li>H</li>
      <li>E</li>
      <li>L</li>
      <li>L</li>
      <li>O</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;