码迷,mamicode.com
首页 > Web开发 > 详细

jQuery-UI组件Effects

时间:2019-08-24 18:39:21      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:none   lod   function   logs   cdn   中心   展示   优先   aaa   

 

jQuery UI介绍

技术图片

 

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

CDN:jQuery UI 1.12.1jQuery 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

名称效果原理参数
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

标签:none   lod   function   logs   cdn   中心   展示   优先   aaa   

原文地址:https://www.cnblogs.com/yangjiale/p/11405314.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!