本文已参与「新人创作礼」活动，一起开启掘金创作之路。

jQuery UI介绍

graph TB
A(jQuery UI)-->B(交互Interactions)
A-->C(小部件Widgets)
A-->D(效果库Effects)
E-->S(方法)
E-->Sa(动画)
D-->E(预设动画)
S-->E1(effect)
S-->E2(show,hide,toggle)
D-->F(class操作)
D-->G(color动画)
F-->H1(add,remove,toggle)
F-->H2(switch)

jQuery UI较原jQuery新增了多个预设动画 jQuery UI重写了show,hide,toggle方法，参数与原jQuery有所不同 jQuery UI新增了Effect(特效)方法（感觉是把元素移除后立即执行show，不知道什么卵用）

CDN：jQuery UI 1.12.1，jQuery 3.4.1

预设动画方法语法

effect,show,hide,toggle语法都相同，所以只展示hide的语法

格式：hide(effect,options,speed,callback)

参数(*为可选)	类型	含义
effect	String	要使用的预设动画(特效)
options	Object	参数，如 easing(缓动函数) 或一些预设动画特有的参数
speed
callback

例：hide("slide",{easing:"linear"},1000,function(){});

预设动画详解

下面表格中的效果为hide和show交替为简便，原理只解释hide

*[更改真身定位]:真身position=absolute(相对父元素),top和left=当前位置 *[复制分身占位]:复制visiblity=hidden的分身(用来占位)

名称	原理	参数
slide(滑动)	更改真身定位,复制分身占位 → `真身left不断减小并让clip:rect的left不断增大实现剪裁效果,margin不断减小` → `移除分身,真身定位恢复,display=none`	无
blind(百叶窗)	和slide几乎相同，不同的是blind真身在缩小top时分身的height也在缩小，blind会腾出底部的空间，slide不会腾出右侧空间	无
bounce(反弹)	更改真身定位,复制分身占位 → `不断更改top形成反弹效果` → `不断减小opacity` → `移除分身,恢复真身定位,display=none`	无
clip(剪辑)	与blind类似
drop(降落)	与bounce类似	无
explode(爆炸)	`visibility=hidden` → `复制9个分身` → `用rect裁剪分身,不断更改top和left和opacity` → `移除分身,恢复真身定位,display=none`	无
fold(折叠)	与blind类似，由2个动画组成	无
highlight(突出)	`backgroundColor=黄?,backgroundImage=none` → `黄? 不断to 原背景色,opacity不断变小` → `display=none`	无
puff(膨胀)	更改真身定位,复制分身占位 → `opacity和left和top不断减小,fontSize和width和height和padding不断增加` → `移除分身,恢复真身定位,display=none`	无
pulsate(跳动)	`控制opacity`	无
scale(缩放)	和puff类似，没有opacity动画，所以是突然消失的，可以控制缩小比例	*percen(Number 0-100)：要缩放的百分比，图中是30的效果，无参则Number=0
shake(震动)	与bounce类似，没有opacity动画，所以是突然消失的
size(尺寸)	与scale类似，scale是同时缩小width和height，size则可以自定义消失时的尺寸	*to:{width:100,height:50}，无参则和scale的无参效果一样，且是向中心缩小，不是左上角

color动画

使用jQuery UI则animate函数可以支持color动画，语法都相同，需要注意参数书写格式参数示例：

var json={
	backgroundColor:"#0088ff",
	backgroundColor:"#08f",
	backgroundColor:"red",
	backgroundColor:"rgba(0,0,0,0.5)"
};

color动画支持预设值(如red)，rgba，16进制缩写 backgroundColor可以识别，background不可以识别

类动画

类动画执行过程为：按animate(有color动画,且可以识别background)执行动画(参数为按覆盖规则决定样式) → 完毕后把类名添加到元素的class="???"中

css样式覆盖规则

继承例如：

<body><p>aaa</p></body>

body{color:red}
p{color:blue}

按最靠近的父元素的css样式，所以aaa是蓝色的

选择器权值 转自:MGUO 权值高的优先选择，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111

选择器	权值
标签选择器	1
类选择器	10
ID选择器	100
内联样式	1000
伪元素(:first-child等)	1
伪类(:link等)	10

!important 表示强制使用，最好不要用

p{color:#aaa !important;}

多个class css样式里后声明的优先，和class="a b" 或 "b a"无关

语法

类动画中的addClass(添加),removeClass(删除),toggleClass(自动)语法相同，switchClass(交换)则多了一个要交换对象参数

addClass格式：addClass(class,speed,easing,callback)

参数(*为可选)	类型	含义
class	String	要添加的类(注意不加.,直接写类名)
...

switchClass格式：switchClass(class,targetClass,speed,easing,callback)

参数(*为可选)	类型	含义
class	String	源类
targetClass	String	目标类
...

jQuery-UI组件Effects

jQuery UI介绍

预设动画方法语法

预设动画详解

color动画

类动画

css样式覆盖规则

语法