jQuery: 从当前屏幕位置向下移动100px动画

在本文中，我们将介绍如何使用jQuery来实现页面向下移动100px的动画效果。

阅读更多：jQuery 教程

什么是jQuery？

jQuery是一种快速、小巧且功能丰富的JavaScript库。它简化了HTML文档的遍历、事件处理、动画以及与服务器的交互。通过使用jQuery，开发人员可以更容易地创建交互性强、用户体验良好的Web应用程序。

animate()方法

在jQuery中，animate()方法用于创建自定义动画效果。该方法可以改变元素的任意CSS属性的值。我们可以指定属性的开始值和结束值，然后使用animate()方法来逐渐过渡到结束值。

示例

让我们以一个简单的示例来说明如何使用animate()方法来实现页面向下移动100px的动画效果。

首先，我们需要有一个HTML页面。在页面中，我们可以创建一个示例元素，在该元素上应用动画效果。

<!DOCTYPE html>
<html>
<head>
  <title>Animate Page Down 100px</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
     $(document).ready(function() {$ ("#box").click(function() {
        $(this).animate({top: "+=100px"}, "slow");
      });
    });
  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

在上面的示例中，我们创建了一个红色的方块元素，设置了宽高为100px，并将其定位为绝对位置，初始位置位于页面的左上角。

通过引入jQuery库，并在document.ready()函数中使用click事件，我们监测到了方块元素的点击。

在点击事件中，我们使用animate()方法来执行页面向下移动100px的动画效果。通过传递对象参数{top: "+=100px"}给animate()方法，我们告诉jQuery将方块元素的top属性的值逐渐改变为当前值加上100px。

最后，我们传递一个字符串参数”slow”，让动画的速度变慢，使得移动过程更加平滑。

现在，当我们在页面中点击方块元素时，它将以动画方式向下移动100px。