jQuery 在按钮点击时展示 “loading” 动画

在本文中，我们将介绍如何使用 jQuery 在按钮点击时展示 “loading” 动画。加载动画是指在等待过程中显示的动态效果，用于提醒用户正在进行某种处理或者等待数据加载。通过在按钮点击时展示加载动画，可以为用户提供更好的用户体验。

1. HTML 结构

首先，在 HTML 中创建一个按钮，用于触发加载动画：

<button id="btn">点击加载</button>

接下来，在该按钮下方添加一个用于展示加载动画的区域：

<div id="loading"></div>

2. CSS 样式

为加载动画区域创建 CSS 样式，使其具有合适的尺寸和样式。在本示例中，我们将使用一个简单的旋转动画：

#loading {
  width: 30px;
  height: 30px;
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3. jQuery 实现

接下来，使用 jQuery 实现在按钮点击时展示加载动画的功能。首先，我们需要监听按钮的点击事件，并在点击时显示加载动画：

$(document).ready(function() {
  $("#btn").click(function() {
    $("#loading").show();
  });
});

上述代码中，$(document).ready() 函数用于确保页面已经加载完毕，$("#btn") 通过按钮的 id 选择器获取到按钮元素，.click() 函数用于监听按钮的点击事件。当按钮被点击时，$("#loading").show() 将加载动画区域显示出来。

此时，当按钮点击时，加载动画会立即出现。但实际上，我们可能需要等待一段时间来模拟实际加载过程。为了实现这个效果，我们可以使用 setTimeout 函数来延迟加载动画的展示。下面是修改后的代码：

$(document).ready(function() {
  $("#btn").click(function() {
    setTimeout(function() {
      $("#loading").show();
    }, 1000);  // 延迟 1 秒显示加载动画
  });
});

上述代码中，setTimeout 函数用于延迟显示加载动画，参数中的 1000 表示延迟时间为 1 秒（1000 毫秒）。根据实际需求，您可以调整延迟时间。

4. 示例说明

现在，让我们通过一个完整示例来说明使用 jQuery 在按钮点击时展示加载动画的实现方法。

<!DOCTYPE html>
<html>
<head>
  <style>
    #loading {
      width: 30px;
      height: 30px;
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="btn">点击加载</button>
  <div id="loading"></div>
  <script>
    (document).ready(function() {("#btn").click(function() {
        setTimeout(function() {
          $("#loading").show();
        }, 1000);  // 延迟 1 秒显示加载动画
      });
    });
  </script>
</body>
</html>