搞定动画之 JQuery 中的自定义动画

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志——苏轼

写在前面

所谓的自定义动画就是通过 jQuery 提供的方法来完成我们自己想要的动画效果

`animate()`方法

jQuery 提供了 animate() 方法完成自定义动画效果，该方法具有两种用法。

用法一，语法结构如下所示：

animate(params,[speed],[easing],[fn])

参数说明：

params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持). 默认jQuery提供 “linear” 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。

用法二，语法结构如下所示

animate(params,options)

参数说明：

params:一组包含作为动画属性和终值的样式属性和及其值的集合
options:动画的额外选项。如下所示
- speed -> 设置动画的速度,
- easing -> 规定要使用的 easing 函数
- callback -> 规定动画完成之后要执行的函数
- step -> 规定动画的每一步完成之后要执行的函数
- queue -> 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始

值得注意的是这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性。例如 height、top 等。

所有指定的属性必须用骆驼形式，比如用 marginLeft 代替 margin-left .

示例代码如下所示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animate()</title><script src="./library/jQuery 1.12.4.js"></script><style>#box {width: 200px;height: 200px;background-color: lightcoral;position: relative;}</style>
</head><body><button id="btn1">移动</button><button id="btn2">变小</button><div id="box"></div><script>$('#btn1').on('click', function () {$('#box').animate({top: '100px',left: '100px'}, 1000)})$('#btn2').on('click', function () {$('#box').animate({width: '100px',height: '100px'}, 1000)})</script>
</body></html>

执行结果如下图所示：

需要注意的是 animate() 方法不支持一下 CSS 样式

backgroundColor
borderBottomColor
borderBottomColor
borderBottomColor
borderBottomColor
Color
outlineColor

所谓的并发执行效果就是指多个动画同时执行。而排序效果就是按住动画的先后顺序执行。

dome如下：

HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并发与排队</title><script src="./library/jQuery 1.12.4.js"></script><style>#box {width: 200px;height: 200px;background-color: lightcoral;position: relative;}</style>
</head><body><button id="btn">变换</button><div id="box"></div>
</body></html>

并发执行效果测试代码

// 并发执行
$('#btn').on('click', function () {$('#box').animate({top: '100px',left: '100px'}, 1000)
})

执行结果如下所示

排队执行效果测试代码

// 排队执行
$('#btn').on('click', function () {$('#box').animate({left: '100px'}).animate({top: '100px',})
})

执行结果如下图所示：

animate() 第二种写法的 queue 属性的作用，测试代码如下所示：

$('#btn').on('click', function () {$('#box').animate({left: '100px'}).animate({top: '100px',}, {queue: false})
})

执行结果如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T4yEnLoT-1604591373841)(./imgs/jQuery并发执行1.gif)]

animate() 第二种写法的 queue 属性用于控制元素是并发执行还是排队执行。

停止动画效果

jQuery 提供的 stop() 方法用于停止所有在指定元素上正在运行的动画。

语法结构如下所示：

stop([queue],[clearQueue],[jumpToEnd])

参数列表：

queue: 用来停止动画的队列名称
clearQueue: 如果设置成 true，则清空队列。可以立即结束动画；为 false 时，停止当前动画，但是队列中的动画可以继续执行。
jumpToEnd: 如果设置成 true，则完成队列。可以立即完成动画。

测试代码如下所示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>停止动画</title><script src="./library/jQuery 1.12.4.js"></script><style>#box {width: 200px;height: 200px;background-color: lightcoral;position: relative;}</style>
</head><body><button id="btn1">开始</button><button id="btn2">停止</button><div id="box"></div><script>$('#btn1').on('click', function () {$('#box').animate({top: '200px',left: '200px'}, 2000)}).on('click', function () {$('#box').animate({width: '10px',height: '10px'}, 1000)})// 动画停止函数// stop([clearQueue])[,jumpToEnd]// - clearQueue: 如果设置成 true，则清空队列。可以立即结束动画；为 false 时，停止当前动画，但是队列中的动画可以继续执行。// - jumpToEnd: 如果设置成 true，则完成队列。可以立即完成动画。$('#btn2').on('click', function () {$('#box').stop(false, true)})</script>
</body></html>

执行结果如下图所示

延迟执行动画

jQuery提供了 delay() 方法用于设置一个延时来推迟执行队列中之后的项目。

语法结构如下所示

delay(duration,[queueName])

参数列表

duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。

示例代码如下所示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>延迟执行</title><script src="./library/jQuery 1.12.4.js"></script><style>#box {width: 200px;height: 200px;background-color: lightcoral;position: relative;}</style>
</head><body><button id="btn1">开始</button><div id="box"></div><script>$('#btn1').on('click', function () {$('#box').animate({top: '200px',left: '200px'// 延迟1000毫秒执行}, 1000).delay(1000).animate({width: '10px',height: '10px'}, 1000)})</script>
</body></html>

执行效果如下所示