javascript 中动画制作方法 animate()属性

2023年6月10日下午10:12 • JavaScript

当我们需要用JavaScript来制作一个动画时，最常用的办法就是使用animate()属性。它可以让我们定义元素在一段时间内的移动、淡入/淡出、尺寸变化等动画效果。

基本语法

animate()的基本语法如下：

$(selector).animate({styles},speed,easing,callback)

参数说明：

selector：表示需要动画的元素选择器
styles：表示需要设置的样式变化，可以在其中设定元素在动画期间的属性值
speed：表示动画运行的时间，单位是毫秒，默认值为400
easing：表示动画的缓动效果，比如“linear”表示匀速运动，“swing”表示加速再减速，默认值为“swing”
callback：表示动画执行完毕后的回调函数，可以在其中添加一些额外的操作

示例一

下面是一个移动动画的示例。这里我们定义一个按钮，点击按钮后可以用动画的方式将一个元素（用红色字体来标识）向右移动200像素。具体代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Animation Demo</title>
  <style>
    #target {
      color: red;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn1").click(function() {
        $("#target").animate({
          left: '200px'
        });
      });
    });
  </script>
</head>

<body>

  <button id="btn1">移动</button>

  <div id="target">Hello World!</div>

</body>

</html>

在上述代码中，我们选择#btn1按钮，为其添加了一个click()点击事件，当点击按钮时，我们选中了#target元素，为其添加了一个animation()样式，指定它将从原始位置向右移动200像素。

示例二

下面是一个淡入淡出动画的示例。这里我们定义了两个按钮，点击按钮时可以用渐变的方式显隐一个元素。具体代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Animation Demo</title>
  <style>
    #target {
      display: none;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btn1").click(function() {
        $("#target").fadeIn();
      });
      $("#btn2").click(function() {
        $("#target").fadeOut();
      });
    });
  </script>
</head>

<body>

  <button id="btn1">淡入</button>
  <button id="btn2">淡出</button>

  <div id="target">Hello World!</div>

</body>

</html>

在上述代码中，我们选择了两个按钮，为它们分别添加了一个click()点击事件，当点击#btn1按钮时，选中了#target元素，为其添加了一个fadeIn()样式，代表在1秒钟内以渐变的方式显现出来；而当点击#btn2按钮时，选中同样的元素，为其添加了一个fadeOut()样式，代表在1秒钟内以渐变的方式消失。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript 中动画制作方法 animate()属性 - Python技术站