jQuery动画与特效

显示与隐藏动画

语法：

 $('obj').show(duration,fn);显示

$('obj').hide(duration,fn);隐藏

$('obj').toggle();

功能：

1. show()方法能动态地改变当前元素的高度、宽度和不透明度，最终显示当前元素；

2. hide()方法会动态地改变当前元素的高度、宽度和不透明度，最终隐藏当前元素。

参数：duration表示动画执行的速度，以毫秒为单位或关键字

$('obj').show(3000,fn);3秒完成显示

关键字：

slow 慢的 速度0.6秒/600毫秒

normal 常规的  速度0.4秒/400毫秒

fast 快速的  速度0.2秒/200毫秒

淡入淡出动画

语法：

$('obj').fadeIn(duration,fn);淡入

  $('obj').fadeOut(duration,fn);淡出

  $('obj').fadeToggle();

  $('obj').fadeTo(duration,opacity,fn); 淡入到指定透明度。

功能：

1. fadeIn() 方法可以动态地改变当前元素的透明度（其他不变），实现淡入的动画效果，最终显示当前元素；

2. fadeOut() 方法可以动态地改变当前元素的透明度（其他不变），实现淡出的动画效果，最终隐藏当前元素。

3.fadeTo() 方法可以改变元素的透明度到指定某一个值；参数opacity 用于指定不透明值，取值范围是0~1（0代表完全透明，1代表完全不透明）

滑入滑出动画

语法：

$('obj').slideDown(duration,fn);

$('obj').slideUp(duration,fn);

$('obj').slideToggle(duration,fn);

功能：

1. slideDown() 方法会动态地改变当前元素的高度（其他不变），由上到下滑入，即高度向下增大，使其呈现出一种“滑动”的效果，直至最终显示当前元素。

2. slideUp() 方法会动态地改变当前元素的高度（其他不变），由下到上滑出，即高度向上减小，直至最终隐藏当前元素。

自定义动画

语法：animate(properties,duration,fn)

参数：properties参数表示动画设置的样式属性；只能是以数字值形式存在的样式属性，如宽度、高度、字体大小、字体粗细、透明度等。

duration：速度参数，以毫秒为单位或关键字

fn:调用的函数

队列动画：

概念：指在元素中执行一个以上的多个动画效果，即有多个 animate()方法在元素中执行，动画的效果便按“队列”的顺序进行展示。

栗子：

$(this).animate({height:100},"slow");

// 第 1 列

$(this).animate({width:100},"slow");

// 第 2 列

$(this).animate({height:50},"slow");

// 第 3 列

$(this).animate({width:50},"slow");

// 第 4 列

结束动画：

概念：stop() 方法能够结束当前的动画，并立即进入到下一个动画；

不带任何参数的 stop() 方法，则会立即停止当前正在执行的动画，如果后面还有动画要继续，则以当前状态开始接下来的动画；

clearQueue 参数表示是否清空未执行完的动画队列；

gotoEnd 参数表示是否立即完成正在执行的动画。

作用：避免当用户光标进入或移出的速度太快，导致移入移出与对应的动画不一致。