jQuery 图标上下滑动循环动画

引言

在现代的网页设计中，动画效果是非常关键的一部分，它可以提升用户体验，吸引用户的注意力，并使网页更加生动有趣。在本文中，我们将介绍如何使用 jQuery 实现一个简单的图标上下滑动循环动画。

准备工作

在开始之前，我们需要确保已经引入了最新版本的 jQuery 库。可以通过以下代码片段来引入：

<script src="

HTML 结构

首先，我们需要在 HTML 中定义一个容器来显示我们的图标。在本例中，我们使用一个简单的 <div> 元素作为容器，并为其添加一个唯一的标识符 #icon-container。

<div id="icon-container"></div>

CSS 样式

为了让图标能够进行上下滑动的动画效果，我们需要为容器添加一些 CSS 样式。以下是一个示例样式：

#icon-container {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  overflow: hidden;
}

#icon {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: absolute;
  top: 0;
  transition: top 0.5s ease-in-out;
}

jQuery 动画

现在，我们将使用 jQuery 来实现图标的上下滑动循环动画。我们先获取到图标容器的元素并将其存储在变量 container 中。

var container = $('#icon-container');

接下来，我们创建一个名为 animateIcon 的函数，用于执行图标的上下滑动动画。在这个函数中，我们将使用 animate 方法来实现动画效果。

function animateIcon() {
  $('#icon').animate({
    top: container.height() - $('#icon').height()
  }, 1000, 'swing', function() {
    $('#icon').animate({
      top: 0
    }, 1000, 'swing', animateIcon);
  });
}

在这个函数中，我们首先将图标向下滑动到容器的底部，然后再将其滑动回顶部。最后，我们通过递归调用 animateIcon 函数来实现循环动画。

初始化动画

为了开始动画，我们需要在页面加载完成后调用 animateIcon 函数。我们可以使用 $(document).ready 方法来实现这一点。

$(document).ready(function() {
  animateIcon();
});

完整代码示例

下面是完整的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 图标上下滑动循环动画</title>
  <style>
    #icon-container {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      position: relative;
      overflow: hidden;
    }

    #icon {
      width: 100px;
      height: 100px;
      background-color: #f00;
      position: absolute;
      top: 0;
      transition: top 0.5s ease-in-out;
    }
  </style>
  <script src="
  <script>
    $(document).ready(function() {
      var container = $('#icon-container');

      function animateIcon() {
        $('#icon').animate({
          top: container.height() - $('#icon').height()
        }, 1000, 'swing', function() {
          $('#icon').animate({
            top: 0
          }, 1000, 'swing', animateIcon);
        });
      }

      animateIcon();
    });
  </script>
</head>
<body>
  <div id="icon-container">
    <div id="icon"></div>
  </div>
</body>
</html>

流程图

下面是使用 Mermaid 语法绘制的流程图:

flowchart TD
  A[开始] --> B[获取图标容器元素]
  B --> C[定义函数 animateIcon]
  C --> D[使用 animate 方法实现上下滑动动画]
  D --> E[滑动到容器底部]
  E --> F[滑动到容器顶部]
  F