基于jQuery实现最基本的淡入淡出效果实例

针对“基于jQuery实现最基本的淡入淡出效果实例”的完整攻略，我分以下几个部分进行讲解：

1. 确认jQuery库的引入

首先需要确认在 HTML 页面的 head 中是否引入了 jQuery 库，如果没有引入的话可以通过以下代码进行引入：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

这里使用的是 BootCDN 中的 jQuery 库，可以保证 CDN 资源的稳定和速度。

2. 编写基本的 HTML 结构

接下来需要编写基本的 HTML 结构，使得可以在其上进行淡入淡出效果的实现。可以将图片包含在 div 元素中，并为其添加一个 id 属性，代码如下：

<div id="image-wrapper">
  <img src="https://picsum.photos/id/10/500/300"/>
</div>

3. 添加基本的 CSS 样式

在 HTML 结构中添加 CSS 样式，使得图片能够居中且不被其他内容挡住或遮挡。可以使用以下样式：

#image-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. JavaScript 代码实现淡入淡出效果

需要在 JavaScript 中编写代码，实现图片的淡入淡出效果。代码如下：

// 等待整个页面加载完毕
$(document).ready(function() {
  // 选中图片元素
  var image = $('#image-wrapper img');

  // 定义淡入淡出效果的时间
  var duration = 1000;

  // 初始状态为隐藏
  image.hide();

  // 实现淡入效果
  image.fadeIn(duration);

  // 等待 3 秒后实现淡出效果
  setTimeout(function() {
    image.fadeOut(duration);
  }, 3000);

});

在上述代码的注释中已经进行了详细的说明，这里简要概括一下。首先需要等待整个页面进行加载，然后选中图片元素，并定义淡入淡出效果的时间。初始状态为隐藏，然后实现淡入效果，等待 3 秒后实现淡出效果。

5. 添加效果实例

为了更好地展示效果，这里提供两个实例，以供参考：

实例一：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery淡入淡出效果示例一</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <style>
  #image-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  </style>
</head>
<body>

  <div id="image-wrapper">
    <img src="https://picsum.photos/id/10/500/300"/>
  </div>

  <script>
  $(document).ready(function() {
    var image = $('#image-wrapper img');
    var duration = 1000;
    image.hide();
    image.fadeIn(duration);
    setTimeout(function() {
      image.fadeOut(duration);
    }, 3000);
  });
  </script>

</body>
</html>

实例二：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery淡入淡出效果示例二</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <style>
  #image-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  </style>
</head>
<body>

  <div id="image-wrapper">
    <img src="https://picsum.photos/id/20/500/300"/>
  </div>

  <script>
  $(document).ready(function() {
    var image = $('#image-wrapper img');
    var duration = 1500;
    image.hide();
    image.fadeIn(duration);
    setTimeout(function() {
      image.fadeOut(duration);
    }, 2000);

    setTimeout(function() {
      image.attr('src', 'https://picsum.photos/id/30/500/300');
      image.fadeIn(duration);
      setTimeout(function() {
        image.fadeOut(duration);
      }, 3000);
    }, 6000);
  });
  </script>

</body>
</html>

这些代码可以直接复制到 HTML 文件中运行，即可看到淡入淡出效果的实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jQuery实现最基本的淡入淡出效果实例 - Python技术站