jQuery ui effects
jQuery ui 内置了一组effects,包括:blind,bounce,clip,drop,explode,fade,fold,highlight,pulsate,puff,scale,size,shake,slide,transfer这些效果
这些effect可以通过$("selector").effect(effect,[option],[speed],[callback]),或者是jQuery中包装的show和hide方法调用。其参数和effect调用相同。
这里说明下参数的含义:
effect:就是效果名称,可以是上面列举的effects之一。
option:在不同的effect中包含不同的option。
speed:可以是数值,单位是ms,也可以是"slow","normal", 和 "fast"。
callback:就是执行完动画后的回调函数。
下面就每个effect的option做一个说明:
blind:
mode:值为hide/show
direction:值为vertical/horizontal
bounce:
direction: 值为up/down/left/right
distance: 值为数值,默认为20
times: 值为数值,默认为5
duration:值为数值,每个弹跳的速度,默认值250ms
clip:
mode:值为show/hide
direction:值为vertical/horizontal
drop
direction: 值为left/right/top/down
mode: 值为show/hide
distance:值为数值。
explode
pieces: 值为数字,爆炸的块数。默认为9
mode: 值为show/hide/toggle
fade
mode: 值为show/hide
fold
mode:值为show/hide
size: 值为数值,折叠的大小,默认为15
horizFirst:bool值,是否先水平方向折叠
highlight
mode: 值为show/hide
color: 值为颜色值,默认为#ffff99
pulsate
mode:值为show/hide
times:值为数值,跳动的次数
puff
mode:值为show/hide
percent: 值为数值,膨胀的比例,默认为150
scale
mode:值为show/hide
percent: 值为数值
direction:vertical/horizontal/both
origin:原始大小
from: 效果开始的大小
size
mode:值为show/hide
restore: bool类型,默认false
scale:vertical/horizontal/both
origin:原始大小
from:从一定的高度和宽度开始
to:到一定的高度和宽度结束
shake
mode:值为show/hide
direction: 值为left/right/up/down,默认值left
distance: 值为数字,默认值20
times:值为数字
duration:每次效果的速度
slide
mode:值为show/hide
direction: 值为left/right/up/down
distance: 值为数值
transfer
to:目标jQuery对象
className: 需要添加的css样式名称.
jQuery ui 为我们封装了上面的一些效果,在大部分的开发中,上述的效果基本可以满足我们的需求。而不需要我们自己另行开发。此外,在jQuery ui中封装了一组easing
可以在effect中搭配easing的使用,注意easing也是上述所有effect的option中的一个option,option的名称就是easing。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述