jQuery简单动画与特效

1.显示与隐藏动画

1.1show()与hide()方法,前者为显示,后者为隐藏
show()方法和hide()方法都能动态的改变当前元素的高、宽、不透明度
语法:

①jQuery对象.show(duration,[fn])。
②jQuery象.hide(duration，[fn]）
 duration为动画运行时间,[fn]为function，在动画完成时执行的函数

案例:($("div").show("slow")或者$("div").show(600)")
1.2toggle()方法
能动态地改变当前元素高度、宽度、不透明度
若元素为可见则切换为隐藏,若为隐藏则可见

语法：jQuery对象.toggle(duration,[fn]);

相似:**toggleClass()**有这个样式就移除,没有就添加
**fadeToggle()**淡入淡出的隐藏与显示切换
**slideToggle()**滑入滑出的隐藏与显示

2.fadeIn()与fadeOut()淡入淡出动画效果

主要通过改变透明度实现淡入淡出,透明度从0到1或1到0
如果需要将透明度调到指定值需要用fadeTo()方法

语法:jQuery对象.fadeIn(duration,[fn]);
	jQuery对象.fadeOut(duration,[fn])
	jQuery对象.fadeTo(duration,opacity,[fn])

duration与[fn]与之前所讲意思一致,opacity指定透明度值

3.slideDown()与slideUp()滑入滑出动画效果

动态地改变语速高度使其达到滑入滑出
slideDown()由上到下滑入 slideUp与之相反

语法:jQuery对象.slideDown(duration,[fn])
jQuery对象.slideUp(duration,[fn])

4.自定义动画

4.1animate简单动画
动态的改变当前元素的各种css样式,可改变:高宽、边框、边距、定位、字体、背景、透明度等

语法:jQuery对象.animate(properties,[duration],[fn]);
例:$("div").animate({width:"180px",height:"60px"},6