Последовательное затухание в Efect с 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

Вы также можете анимировать буквы по одной:

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

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

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

Answer 2

В JavaScript нет функции setTimeOut.Попробуйте setTimeout вместо этого.Помните, что Java Script чувствителен к регистру .

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

  enterButton.on('click', function(e) {
    e.preventDefault();
    greating.fadeIn();
  })
});

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

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