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

标签 javascript jquery html css

我理解 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");

关于javascript - 淡入图像,效果完成后,淡入旁边的另一个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40516361/

相关文章:

javascript从在线链接获取html文件

javascript - 助焊剂/助焊剂 : Updating routes based on state change

javascript - AngularJs 过滤器的条件为 "or"?

javascript - 这行 JQuery 代码是什么意思?

javascript - 我如何更正这个 jquery/js 复选框代码

javascript - 切换复选框值

html - IE7 不应用字体

javascript - console.log ('\x' ) 的输出背后的逻辑是什么,其中 x 是任意数字?

javascript - 获取自定义 Jquery 数据表 GET 将发送到服务器的请求参数

html - 如何删除 Bootstrap 中列之间的装订线(间距)?