jQuery动画与特效

一、显示与隐藏动画效果

1.显示hide()和隐藏show()

语法：

1 jQuery对象.show（duration,[fn]);
2 jQuery对象.hide（duration,[fn]);
3 /*其中duration是动画效果运行时间，可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。
4 也可以直接填毫秒数，fn函数为回调函数，动作完成后调用此函数*/

2.toggle()函数

语法：

jQuery对象.toggle();
/*无参格式，在显示和隐藏之间切换*/
jQuery对象.toggle(true or false) ;
/*带布尔值形式，为true时显示元素，否则，隐藏元素*/
jQuery对象.toggle(duration,[fn]);
/*与show()函数用法类似*/

 

二、淡入与淡出动画效果

1.淡入fadeIn（）淡出fadeOut（）

语法：

jQuery对象.fadeIn(duration,[fn]);
jQuery对象.fadeOut(duration,[fn]);
/*本质上是改变元素的透明度*/
/*其中duration是动画效果运行时间，可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。
也可以直接填毫秒数，fn函数为回调函数，动作完成后调用此函数*/

2.fadeToggle 函数

语法：

jQuery对象.fadeToggle (duration,[fn]);  /*在显示和隐藏之间切换*/

 

3.fadeTo 函数

语法：

jQuery对象.fadeTo(duration,opacity,[fn]); /* opacity为透明度，0到1之间，1为全透明*/

 

三、滑入与滑出动画效果

1.滑入slideDown（）与滑出slideUp（）

语法：

jQuery对象.slideDown(duration,[fn]);
jQuery对象.slideUp(duration,[fn]);
/*本质上是改变元素的高度*/
/*其中duration是动画效果运行时间，可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。
也可以直接填毫秒数，fn函数为回调函数，动作完成后调用此函数*/

 

2.slideToggle 函数

语法：

jQuery对象.slideTo(duration,[fn]);  /*动态改变元素的高度**/

 

三、动画自定义与停止

1.简单的动画

语法：

jQuery对象.animate(params,[duration],[easing],[fn])
/*params表示用于制作动画效果的属性样式和值得集合
duration表示三种默认的速度字符，slow、normal、fast或自定义的毫秒数
easing为动画插件使用，用于控制动画的表现效果，通常有linear和swing字符值
fn为动画完毕后，执行的回调函数*/

 

2.停止动画

语法：

jQuery对象.stop([clerQueue],[gotoEnd]);
/*两个参数均为布尔类型
clerQueue表示是否清空未执行的动画列队
gotoEnd表示是否立即完成正在执行的动画