最近在看jQuery UI的库,以前没怎么系统学过jQuery UI库函数的效果,JS说到底是一门函数式编程语言,靠一点点的搭建来完成整个框架,现将效果函数的用法列表如下,具体的实现可以去看库函数。
.addClass()
当动画样式改变时,为匹配的元素集合内的每个元素添加指定的Class。
$("div").click(function(){ $(this).addClass("big-blue",1000,"easeOutBounce"); });
Blind Effect
百叶窗特效通过将元素包裹在一个容器内,采用“拉百叶窗”效果来隐藏或显示元素
$(document).click(function(){ $("#toggle").toggle("blind"); });
Bounce Effect
反弹特效,反弹一个元素。当与隐藏或显示一起使用时,最后一次或第一次反弹会呈现淡入/淡出的效果
$(document).click(function(){ $("#toggle").toggle("bounce",{time:3},"slow"); })
Clip Effect
剪辑效果通过垂直或水平剪辑一个元素来显示或隐藏它,并且它是从元素的两端同时进行的。
$(document).click(function(){ $("#toggle").toggle("clip"); })
Color Animation
颜色动画使用.animate()
$("#toggle").click(function(){ $("#elem").animate({ color:"green", backgroundColor:"rgb(20,20,20)" }); });
Drop Effect
拉拽特效隐藏或显示一个元素,并使用通过淡入或淡出效果使它向一个方向滑动。
$(document).click(function(){ $("#toggle").toggle("drop"); });
easings
动画缓冲函数可以确定在动画过程中不同时刻的动画速度。
Explode Effect
爆炸特效通过将元素分拆成若干片来隐藏或显示一个元素
$(document).click(function(){ $("#toggle").toggle("explode"); })
Fade Effect
淡入淡出的隐藏式或显示一个元素
$( document ).click(function() { $( "#toggle" ).toggle( "fade" ); });
Fold Effect
通过折叠形式来隐藏或显示一个元素
$( document ).click(function() { $( "#toggle" ).toggle( "fold" ); });