最近在看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动画
反弹特效,反弹一个元素。当与隐藏或显示一块儿使用时,最后一次或第一次反弹会呈现淡入/淡出的效果this
$(document).click(function(){ $("#toggle").toggle("bounce",{time:3},"slow"); })
Clip Effectspa
剪辑效果经过垂直或水平剪辑一个元素来显示或隐藏它,而且它是从元素的两端同时进行的。code
$(document).click(function(){ $("#toggle").toggle("clip"); })
Color Animationblog
颜色动画使用.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" ); });