jQuery使用animate创建动画用法实例

时间：2023-12-07

下面是详细讲解jQuery使用animate创建动画的攻略。

什么是jQuery animate？

jQuery animate是一种创建动画的方式，它可以让元素以自然且流畅的方式进行动画效果，比如让元素缓慢地移动、旋转等。

animate()方法的语法

animate()方法的语法如下：

jQuery(selector).animate(styles, speed, easing, callback)

selector：表示要应用animate()方法的元素
styles：表示一个包含用于动画的CSS属性和值的对象
speed：表示动画的速度，可以是slow、normal或fast，也可以是完成动画的毫秒数
easing：表示动画的缓动效果，可以是swing或linear，也可以是自定义的缓动函数
callback：表示动画完成后要执行的函数

其中styles是animate()方法中最常用的参数，我们来看一些示例。

示例一：改变元素的高度和背景色

在这个示例中，我们将使用animate()方法来改变元素的高度和背景色。代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery animate示例1</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #ff0000;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    $(document).ready(function() {
      $(".box").animate({
        height: "400px",
        backgroundColor: "#00ff00"
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了animate()方法来改变.box元素的高度和背景色。当页面加载后，我们的元素将会逐渐变高并且从红色变成绿色。

示例二：移动元素

在这个示例中，我们将使用animate()方法来移动元素。代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery animate示例2</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: #ff0000;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    $(document).ready(function() {
      $(".box").animate({
        left: "100px",
        top: "100px"
      }, 1000);
    });
  </script>
</body>
</html>

在我们的示例中，我们使用animate()移动了.box元素。当页面加载后，我们的元素将会从屏幕中央移动到距离左上角100像素的位置。

以上就是关于使用jQuery animate创建动画的完整攻略，希望对你有所帮助。

上一篇：在js中使用”with”语句中跨frame的变量引用问题 下一篇：javascript实现很浪漫的气泡冒出特效

jQuery使用animate创建动画用法实例

什么是jQuery animate？

animate()方法的语法

示例一：改变元素的高度和背景色

示例二：移动元素

相关文章