jQuery 效果 - 淡入淡出

jQuery 是一个广泛应用于 Web 前端开发的 JavaScript 库。它提供了多种效果和动画的实现方式，其中最简单的就是淡入淡出效果。

淡入淡出的基本用法

使用 jQuery 的淡入淡出效果非常简单。我们可以使用.fadeIn() 方法实现元素的淡入效果，使用.fadeOut() 方法实现元素的淡出效果。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery 淡入淡出效果示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <button id="fadeInBtn">淡入</button>
    <button id="fadeOutBtn">淡出</button>
    <div class="box"></div>
    <script>
      $(document).ready(() => {
        $('#fadeInBtn').click(() => {
          $('.box').fadeIn();
        });
      
        $('#fadeOutBtn').click(() => {
          $('.box').fadeOut();
        });
      });
    </script>
  </body>
</html>

上面的代码中，我们首先引入了 jQuery 库。然后定义了两个按钮，一个用于触发淡入效果，一个用于触发淡出效果。最后定义了一个 div 元素作为淡入淡出的目标元素。

在 JavaScript 的 ready 事件回调函数中，我们通过选择器选中目标元素，并为两个按钮绑定了 click 事件。在按钮的 click 事件处理函数中，我们使用 fadeIn 方法和 fadeOut 方法实现淡入淡出效果。

淡入淡出效果的一些选项

在使用 fadeIn 和 fadeOut 方法时，我们还可以为其传入一些选项来指定效果的一些参数。下面是一些常用的选项：

duration

duration 选项用于指定淡入淡出的时长，单位为毫秒。默认值为 400 毫秒。我们可以通过传入一个数字或者字符串来设置具体的时长。例如：

$('.box').fadeIn(1000); // 淡入 1000 毫秒
$('.box').fadeOut('slow'); // 淡出 600 毫秒

complete

complete 选项用于指定淡入淡出效果完成后的回调函数。例如：

$('.box').fadeOut(1000, () => {
  alert('淡出完成！');
});

easing

easing 选项用于指定淡入淡出的缓动函数。默认值为 'swing'。我们可以传入 'linear' 或者一个自定义的缓动函数来改变运动的方式。例如：

$('.box').fadeIn(1000, 'linear'); // 淡入 1000 毫秒，匀速缓动

淡入淡出的链式调用

在 jQuery 中，我们还可以通过链式调用将多个效果组合起来。例如：

$('.box').fadeOut(1000).fadeIn(1000);

上面的代码中，先使用 fadeOut 方法让 .box 元素淡出，然后使用 fadeIn 方法让其再次淡入。这两个方法通过链式调用依次执行，从而实现了一个有趣的动画效果。

总结

淡入淡出效果是 jQuery 中最简单的效果之一。通过使用 fadeIn 和 fadeOut 方法，配合一些选项的调整，我们可以很方便地在网页中实现一些有趣的淡入淡出动画效果。

jQuery 属性 jQuery 效果 - 滑动