淡化在一个图像和效果完成后，淡化在它旁边的另一个

Fade in an image and after the effect finishes, fade in another next to it

本文关键字：另一个 一个 图像      更新时间：2023-09-26

我理解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

您的想法似乎是好的，但再次检查您的代码，您有removeClass的回调，但它必须是fadeIn。

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

大多数jquery动画函数都有两个参数:duration和[on]complete。你可以使用第二个参数来"继续"下一个动画，例如:

$(function() { 
    $(".responsive").fadeIn(2500, function() { 
        $(this).removeClass("responsive");
        $(".responsive2").fadeIn(5000, function() { 
            $(this).removeClass("responsive2");
        });
    });
});
相关文章：