jQuery的animate函数学习记录

本文将详细介绍 jQuery 的 animate 函数的使用方法和注意事项。

简介

animate() 方法是 jQuery 核心库中最常用的方法之一，它通常用于实现页面元素的动态效果。通过使用 animate() 方法，我们可以在一定的时间段内（如1000毫秒）逐步地改变一个元素的属性（如位置、大小、背景色等），从而使元素呈现出平滑的动画效果。此外，animate() 方法还支持多种参数类型和自定义回调函数，以满足不同的动画需求。

基本应用

animate() 方法的基本语法如下：

$(selector).animate({params},speed,callback);

其中，参数 params 表示要修改的元素属性，可以是一个对象或是一个样式字符串；参数 speed 表示动画执行的时间（单位为毫秒）；参数 callback 是一个可选参数，表示在动画结束时执行的回调函数。

下面是一个简单的示例，演示如何使用 animate() 方法让一个 div 元素沿着水平方向移动到指定位置：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <style>
    div {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>
<body>
<div id="box"></div>
<script>
  $(document).ready(function() {
    $("#box").click(function() {
      $(this).animate({left: '500px'}, 1000);
    });
  });
</script>
</body>
</html>

点击该 div 元素后，它就会沿着水平方向移动到屏幕右边缘，从而形成一个简单的动画效果。

可选属性

除了最基本的参数外，animate() 方法还支持多种可选属性，如下所示：

easing

easing 属性即动画效果函数，它决定了元素在动画过程中的运动状态。常见的 easing 函数有 linear（线性）、swing（摆动）等，其中 swing 是 jQuery 默认的运动函数。此外，animate() 方法还提供了一些高级的 easing 函数，比如 easeOutBounce、easeInOutElastic 等，这些函数可以让动画效果更加生动。

下面是一个使用 easing 属性的示例，演示如何让一个 div 元素在移动过程中使用 easeOutBounce 函数：

$("#box").click(function() {
  $(this).animate({left: '500px'}, {duration: 1000, easing: 'easeOutBounce'});
});

queue

queue 属性指定了动画效果的触发顺序。使用 queue 属性可以让动画效果排队执行，从而形成一个较为连贯的动画效果。

下面是一个使用 queue 属性的示例，演示如何让多个 div 元素按顺序执行动画效果：

$("#box1").animate({left: '+=250px'}, 1000);
$("#box2").delay(1000).animate({left: '+=250px'}, 1000);
$("#box3").delay(2000).animate({left: '+=250px'}, 1000);

在上述代码中，三个 div 元素分别延迟了一定的时间后依次移动到指定位置。

启动回调函数

animate() 方法还支持启动回调函数，即在动画开始时执行一个函数。回调函数工作原理如下：

$("selector").animate({ params }, { duration: time }, function() {
  // 回调函数内容
});

下面是一个使用启动回调函数的示例，演示如何在动画开始时弹出一个提示框：

$("#box").click(function() {
  $(this).animate({left: '500px'}, {
    duration: 1000,
    start: function() {
      alert("开始移动！");
    }
  });
});

结束回调函数

animate() 方法还支持结束回调函数，即在动画结束时执行一个函数。

下面是一个使用结束回调函数的示例，演示如何在动画结束时修改元素的属性，从而形成一个无限循环的动画效果：

function move() {
  $("#box").animate({left: '500px'}, {
    duration: 1000,
    complete: function() {
      $(this).css('left', '0px');
      move();
    }
  });
}
move();

在上述代码中，我们定义了一个递归函数 move，该函数通过调用 animate() 方法实现了一个循环移动效果；同时，在完成每次动画后，还调用了 complete 回调函数重新设置元素位置并重新开始动画，从而形成了一个无限循环的效果。