jquery div animate-代码示例

温馨提示：这篇文章已超过288天没有更新，请注意相关的内容是否还可用！

jQuery的div animate()方法是用来实现对div元素进行动画效果的。通过animate()方法，我们可以改变div元素的位置、大小、透明度等属性，从而实现各种动态效果。

下面是一个示例代码，展示了如何使用animate()方法来实现一个简单的动画效果：


<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #myDiv {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
  <script>
    $(document).ready(function() {
      // 使用animate()方法改变div元素的位置和大小
      $("#myDiv").animate({
        top: "200px",
        left: "200px",
        width: "200px",
        height: "200px"
      }, 1000);
    });
  </script>
</body>
</html>

在上面的代码中，我们首先用CSS设置了一个id为myDiv的div元素的样式，使其具有红色背景、宽高为100px，并位于页面的中心位置。然后，在JavaScript代码中，我们使用了animate()方法来改变div元素的位置和大小。

在animate()方法的参数中，我们传入一个对象，其中包含了我们想要改变的属性和目标值。在这个示例中，我们将top属性的目标值设置为"200px"，left属性的目标值设置为"200px"，width属性的目标值设置为"200px"，height属性的目标值设置为"200px"。我们还传入了一个持续时间参数1000，表示动画效果的持续时间为1秒。

通过这段代码，我们可以看到div元素会从页面中心位置移动到左上角，并且同时变大为200px×200px的大小。这个动画效果会在1秒钟内完成。

jquery div animate-代码示例

相关阅读