今天，我们一起来浅学一下自定义动画怎么制作吧！
目录：
一. 事件：***
加载Dom两种方式
绑定事件两种方式
合成事件 / 事件的切换
事件传播（事件冒泡）
事件坐标
移除事件
二. 动画效果：***
基本
滑动
淡入淡出（透明度）
自定义动画
本堂课新单词：
1，window.onload（）：加载事件
2，hover（）：鼠标悬停合成事件
3，toggle（）：鼠标点击合成事件
4，offsetX：当前元素左上角
5，clientX：窗口左上角
6，pageX：网页左上角
7，元素.unbind（“事件名”）：解除事件
8，toggle（Time）：切换
9，slideToggle（Time）：动画切换
10，fadeToggle（Time）：切换
11，元素.animate（{属性：属性值}，Time）
（要用心记哦！）
一. 事件
加载Dom两种方式： （思维导图如下：）
——加载事件 有两种方式：
window.onload=()=>{}//加载事件
$(()=>{})//加载事件
绑定事件两种方式：
（事件委托 的举例：将要删除的按钮委托给表格，再调用删除的方法将该行删掉）
// 事件委托 on
$("table").on("click","button",function(){
$(this).parents("tr").remove()
})
合成事件 / 事件的切换：
（toggle（）：是鼠标的点击合成事件：）
// toggle 控制是否显示的
$("div").toggle(()=>{
// alert("++++")
// },()=>{
// alert("----")
})
事件传播（事件冒泡）：
（事件冒泡 和 事件传播 的区别在于方向不同，事件冒泡指的是从下往上走，比如说下面代码中可以从p标签找到a标签 事件传播则相反 是从上往下走）
aaaaaaaaaa
（温馨提示： return false 的意思是阻止事件的冒泡）
事件坐标：
后面两个就相当于屏幕的位置，offsetX 类型于是body的位置
// 鼠标的移动事件
$("body").mousemove(e=>{
// e 就是事件对象
// 拿到页面上的值 offsetX类似于body位置 前面两个相当于屏幕位置
console.log(e.clientX,e.pageX,e.offsetX)
})
移除事件：
如果想要某一个事件失去效果，那么可以尝试下方的操作：
// bind:绑定事件
// unbind:解除事件
$("body").unbind("mousemove")
二. 动画效果：
基本：
点击按钮，可以让div显示或者隐藏（基本动画），代码如下：
滑动：
淡入淡出（透明度）：
想要淡出的效果，可以参考以下代码：
// $("div").fadeOut(5000)
自定义动画：
（温馨提示：top left 只能用于绝对布局当中）
以下是自定义动画效果的代码：
// 鼠标移入事件
$("div").mouseover(function(){
$(this).animate({
width:"300px",
height:"300px",
// top 和 left 只能用于绝对布局
// left:"30px",
// top:"30px"
})
})
（以上所有的方法演示以及小知识点，详细代码在下方哦~）
div{ width: 100px; height: 100px; background: pink; position:absolute; margin:auto; left:50%; top:50%; transform: translate(-50%,-50%); } aaaaaaaaaa
草莓草莓草莓草莓 草莓草莓草莓草莓
运行结果如下图所示：
今天又是充满满满的知识的一天，你们都学到了吗？ ^-^
