javascript - jquery/javascript 中的多重淡入淡出

Question

我想在页面加载时淡入第一段，并在 5 秒后淡出第二段 当页面加载时。我已经把这两个隐藏在CSS中了？

    <p class="welcome">WELCOME &nbsp;    TO  &nbsp;  PAG</p>
    <p class="touch">"a land of passes"</p>

      <script>
              $(document).ready(function () {
              $('.welcome').fadeIn(5000).removeclass('hidden');
              $('.touch').delay(5000),fadeIn(5000).removeclass('hidden');

           });

       </script>

Answer 1

在第一个动画的完整回调中触发第二个动画。

$(document).ready(function() {
  $('.welcome').fadeIn(5000, function() {
    $('.touch').fadeIn(5000).removeClass('hidden');
  }).removeClass('hidden');
});

$(document).ready(function() {
  $('.welcome').fadeIn(5000, function() {
    $('.touch').fadeIn(5000).removeClass('hidden');
  }).removeClass('hidden');
});

.welcome,
.touch {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="welcome">WELCOME &nbsp; TO &nbsp; PAG</p>
<p class="touch">"a land of passes"</p>

<小时/> 使用您自己的代码替换方法，使其能够修复代码中的以下拼写错误:

1. 使用 delay(5000).fadeIn(5000) 而不是 delay(5000),fadeIn(5000)，因为逗号无法按您的预期工作(点正在用于链接)。
2. 使用removeClass而不是removeclass，C应该大写。

最终代码:

$(document).ready(function() {
  $('.welcome').fadeIn(5000).removeClass('hidden');
  $('.touch').delay(5000).fadeIn(5000).removeClass('hidden');
});

$(document).ready(function() {
  $('.welcome').fadeIn(5000).removeClass('hidden');
  $('.touch').delay(5000).fadeIn(5000).removeClass('hidden');
});

.welcome,
.touch {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="welcome">WELCOME &nbsp; TO &nbsp; PAG</p>
<p class="touch">"a land of passes"</p>