javascript - 淡入图像，效果完成后，淡入旁边的另一个图像

Question

我理解 SO 的规则，我必须先在类似的问题中搜索答案，但主题中没有一个得到我要找的东西。我正在尝试制作一个带有图像的 div 淡入，在它完成该效果后，另一个在它旁边淡入。我很确定它必须通过 jQuery 回调来完成，但我尝试过的所有方法似乎都不起作用。

这是 HTML 和 jQuery:

$(document).ready(function() {
  $(".responsive").fadeIn(2500).removeClass("responsive", function() {
    $(".responsive2").fadeIn(5000).removeClass("responsive2");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w3-row">
  <div class="w3-col s6 w3-center">
    <img src="https://picsum.photos/id/237/100" class="responsive">
    <a href="lu-sound.html">
      <h1 class="center left">SOUND</h1>
    </a>
  </div>
  <div class="w3-row">
    <div class="w3-col s6 w3-center">
      <img src="https://picsum.photos/id/1062/100" class="responsive2">
      <a href="lu-suspension.html">
        <h1 class="center right">SUSPENSION</h1>
      </a>
    </div>
  </div>

CSS 很简单:.responsive 和 .responsive2 这两个类的显示属性均为 none。

Answer 1

你的想法似乎没问题，但是再检查你的代码，你有removeClass的回调，但它必须是fadeIn。

$(".responsive").fadeIn(2500, function() {
    //callback
}).removeClass("responsive");