jQuery中动画函数animate的用法详解【转】
定义和用法
animate()方法执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。
方法参数
$(selector).animate(styles,speed,easing,callback)
styles：
styles用来设置对象属性值的目标值，即需要将属性值变成什么状态或者大小。设置格式需要写成字典的格式，即一个属性对应一个属性值，如果同时设置多个属性值，需要用逗号连接。如果属性值是数字型的，可以不加单位，如{“width”:100} 但是如果要加上属性值单位，就要将属性值用引号包起来，如{“width”:”200px”}
animate可以操作的属性很多，但是它不能操作颜色，如对象背景颜色，字体颜色等，如果想要操作颜色，需要导入官方提供的js文件才可以。下面给出下载链接，读者可以自己去下载然后导入到自己的程序中。https://github.com/jquery/jquery-color
下载好之后，可以像这样导入：
<script src="./js/jquery.color.js"></script>
speed
speed就是速度、多快的意思，就是对象属性值从当前的状态转换到你设置的另一个状态的变化时间，支持数字类型和字符串两种类型，数字类型可以不用引号，直接写数字，单位是毫秒。字符串是固定值’fast’、’normail’、’slow’，如果不写，默认就是’normal’。
easing
easing是描述这个动画设一个怎样的运行过程，’linear’ 就是匀速的意思，即对象属性值从当前值变化到另一个值在固定的时间内是匀速变化的，而默认’swing’这个参数表示曲线形的运动模式，刚开始会慢慢运动，然后加速，最后减速
callback
callback是一个回调函数表示在动画执行完毕以后去调用的一个函数，用了这个回调函数，我们可以实现让动画往复运行，即在回调函数里面再把对象属性值设置为初始状态，再利用循环定时器，可以完成，下面会给大家附带一个动画代码，就是用这种思想实现的。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>13-jQuery中的动画</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: green;
text-align: center;
line-height: 200px;
margin: 0 auto;
}
</style>
<!-- 这里就不多解释了，只要你不是第一此接触jQuery，肯定知道这句代码什么意思 -->
<script src="./js/jquery-1.12.4.min.js"></script>
<!-- alimate动画函数不支持修改颜色 需要导入库颜色库才行 -->
<script src="./js/jquery.color.js"></script>
<script>
$(function () {
var $div = $('.box');
// 动画函数
/*
第一个参数: {} 动画属性 css属性
第二个参数: 动画持续时间 毫秒
第三个参数: swing linear 默认不传就是用 swing 可以实现不同的过度效果
第四个参数: 动画执行完成后的回调函数
*/
// 封装成函数
var oChange = function () {
// 更改标签内文字
$div.html('life is short');
$div.animate({
'width': '100%',
'background-color': 'red',
'font-size': '80px',
'color': 'pink',
'border-radius': '2000px',
}, 2000, 'swing', function () {
// 更改标签内文字
$div.html('you need python');
$div.animate({
'width': 200,
'background-color': 'green',
'font-size': '16px',
'color': 'red',
'border-radius': '0px',
}, 2000, 'swing');
});
}
// 第一个参数要是一个函数
setInterval(oChange, 4000);
})
</script>
</head>
<body>
<div class="box">life is short
</div>
</body>
</html>
文章转自：https://blog.csdn.net/weixin_40612082/article/details/80455638
