jQuery之模拟实现$().animate()(上)
文章图片
根据上图实现除doAnimation
外的逻辑:
jQuery之$().animate()的实现 这是A
![jQuery之模拟实现$().animate()(上)](https://img.it610.com/image/info10/d43481393e0f43d8a23cf35176de1238.gif)
文章图片
解析:
(1)匿名函数自调用的参数:
(function(a){
console.log(a) //name
})('name')(function (b) {
console.log(b) //function(){console.log('name')}
})(function () {
console.log('name')
})
(2)快速匹配id选择器
//匹配ID
let rquickExpr = /^(?:#([\w-]*))$/;
(3)inprogress是动画锁
当第一个动画执行时,向
Queue
中添加锁inprogress
,阻止异步调用动画,也就是要求同步执行动画,当动画结束时,移除锁,调用下一个动画。(4)transitionend
transitionend
事件在 CSS 完成过渡后触发,这里当做单个动画完成的信号,触发后,会告知下个动画进行下图的实现将在下篇文章贴出:
![jQuery之模拟实现$().animate()(上)](https://img.it610.com/image/info10/cea2017248af4e958f1be70165dd3575.jpg)
文章图片
![jQuery之模拟实现$().animate()(上)](https://img.it610.com/image/info10/13561f2021a64f00b1876248930fc4d3.jpg)
文章图片
【jQuery之模拟实现$().animate()(上)】(完)
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai)
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之(北大核心)
- 生活随笔|好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息