jQuery顺序淡入效果失效：着陆页仅显示黑屏问题求助

嘿，我帮你排查了代码里的问题，主要是两个关键错误导致的黑屏和动画失效：

1. JavaScript里的拼写错误 #

你写的setTimeOut是错的！正确的写法是setTimeout（注意是小写的t）。这个拼写错误直接导致初始的移除content-hidden类的代码根本不会执行，所以欢迎区域一直处于隐藏状态，自然就显示黑屏了。

修正后的JS代码：

$(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(); 
  }) 
});

2. 完全缺失关键CSS样式 #

你只给了HTML和JS，但没有对应的CSS——这才是动画不显示的核心原因！content-hidden类需要定义隐藏规则，fly-in-text的逐字飞入效果也得靠CSS动画实现。我给你补全了必要的样式，直接用就行：

/* 基础重置，避免默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #fff; /* 防止页面默认背景导致的黑屏 */
}

/* 欢迎区域全屏样式 */
.welcome-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000; /* 开场黑色背景 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 隐藏状态的样式 */
.welcome-section.content-hidden {
  opacity: 0;
  visibility: hidden;
}

/* 逐字文本的布局 */
.fly-in-text {
  list-style: none;
  display: flex;
  gap: 10px;
}

/* 单个字母的样式及动画 */
.fly-in-text li {
  color: #fff;
  font-size: 4rem;
  opacity: 0;
  animation: flyIn 0.5s ease forwards;
}

/* 给每个字母设置延迟，实现逐字飞入 */
.fly-in-text li:nth-child(1) { animation-delay: 0.2s; }
.fly-in-text li:nth-child(2) { animation-delay: 0.4s; }
.fly-in-text li:nth-child(3) { animation-delay: 0.6s; }
.fly-in-text li:nth-child(4) { animation-delay: 0.8s; }
.fly-in-text li:nth-child(5) { animation-delay: 1s; }

/* 飞入动画的关键帧 */
@keyframes flyIn {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 进入按钮的样式及动画 */
.enter-button {
  display: inline-block;
  margin-top: 30px;
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  border: 2px solid #fff;
  padding: 10px 20px;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards 1.2s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

整合后的完整代码 #

把CSS放在HTML的<head>里，确保样式优先加载，这样动画就能正常运行了：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Landing Page Animation</title>
  <style>
    /* 上面的CSS代码粘贴到这里 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #fff;
    }

    .welcome-section {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: #000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .welcome-section.content-hidden {
      opacity: 0;
      visibility: hidden;
    }

    .fly-in-text {
      list-style: none;
      display: flex;
      gap: 10px;
    }

    .fly-in-text li {
      color: #fff;
      font-size: 4rem;
      opacity: 0;
      animation: flyIn 0.5s ease forwards;
    }

    .fly-in-text li:nth-child(1) { animation-delay: 0.2s; }
    .fly-in-text li:nth-child(2) { animation-delay: 0.4s; }
    .fly-in-text li:nth-child(3) { animation-delay: 0.6s; }
    .fly-in-text li:nth-child(4) { animation-delay: 0.8s; }
    .fly-in-text li:nth-child(5) { animation-delay: 1s; }

    @keyframes flyIn {
      from {
        transform: translateY(100px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .enter-button {
      display: inline-block;
      margin-top: 30px;
      color: #fff;
      text-decoration: none;
      font-size: 1.2rem;
      border: 2px solid #fff;
      padding: 10px 20px;
      opacity: 0;
      animation: fadeIn 0.5s ease forwards 1.2s;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  </style>
</head>
<body>
  <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>

  <script>
    $(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>
</body>
</html>

小提示 #

以后遇到这类问题，记得打开浏览器控制台（按F12）看看有没有报错信息，像这次的拼写错误控制台会直接提示的，排查起来更快～

内容的提问来源于stack exchange，提问作者Erzal Prayudha