浅谈jQuery之动画

背景

jQuery提供了JS未能提供的动画效果，利用jQuery的动画效果，可以极大的简化JS动画部分的逻辑

滑入滑出动画

1. 滑入动画

   定义：以下拉方式动画效果将html内容显示出来

   使用方式：

   $(selector).slideDown(time,function)\ast \ast \ast \ast$(selector).slideDown(2000)
   $(selector).slideDown()\ast \ast \ast \ast$(selector).slideDown(fast/normal/slow)

   time代表执行动画的时间，function代表动画执行完之后所要执行的函数

2. 滑出动画

   定义：以上滑方式动画效果将html内容隐藏出来

   使用方式：

   $(selector).slideUp(time,function)\ast \ast \ast \ast$(selector).slideUp(2000)
   $(selector).slideUp()\ast \ast \ast \ast$(selector).slideUp(fast/normal/slow)

   time代表执行动画的时间，function代表动画执行完之后所要执行的函数

3. 滑入滑出切换动画

   定义：在滑入滑出动画间切换

   使用方式：

   $(selector).slideToggle(time,function)\ast \ast \ast \ast$(selector).slideToggle(2000)
   $(selector).slideToggle()\ast \ast \ast \ast$(selector).slideToggle(fast/normal/slow)

淡入淡出动画

1. 淡入动画

作用：让元素以淡淡的进入视线的方式展现出来

使用方式

>   **$(selector).fadeIn(time,function)** 
  **$(selector).fadeIn(2000)** 
  **$(selector).fadeIn()** 
  **$(selector).fadeIn(fast/normal/slow)** 

2. 淡出动画

作用：让元素以淡淡的离开视线的方式隐藏起来

使用方式

 >   **$(selector).fadeOut(time,function)** 
  **$(selector).fadeOut(2000)** 
  **$(selector).fadeOut()** 
  **$(selector).fadeOut(fast/normal/slow)** 

3. 淡入淡出切换动画

作用：让元素在淡入淡出动画切换

使用方式

> **$(Selector).fadeToggle(time,function)**
  **$(selector).fadeToggle(2000)** 
  **$(selector).fadeToggle()** 
  **$(selector).fadeToggle(fast/normal/slow)** 

4. 修改opacity

作用： 修改opacity的值

使用方式

> **$(Selector).fadeTo(time,opacity,function)**
***time可以是字符串，可以是具体数字***
 ***也可只有参数一、参数二*** 

显示隐藏动画

1. 显示动画

   作用： 将Html结构显现出来

   使用方式

   $(Selector).show(time，function)\ast \ast \ast \ast$(selector).show(2000)
   $(selector).show()\ast \ast \ast \ast$(selector).show(fast/normal/slow)

2. 隐藏动画

作用： 将Html结构隐藏起来

使用方式

>**$(Selector).hide(time，function) **
    **$(selector).hide(2000)** 
  **$(selector).hide()** 
 **$(selector).hide(fast/normal/slow)** 

停止动画

• 定义：停止正在执行的动画

• 使用方式：

> **$(selector).stop()**
***stop()中可以有两个参数，参数一：后续动画是否执行，参数二：当前动画是否执行完毕，默认的是（false,false),注意第一个参数，true代表的是后续动画不执行***
————————————————————————————
**第一种:(false，false)**
**后续动画会执行，当前动画不会执行完**
**第二种:(false，true)**
**后续动画会执行，当前动画会执行完**
**第三种:(true，false)**
**后续动画不会执行，当前动画不会执行完**
**第四种:(true，true)**
**后续动画不会执行，当前动画会执行完**

自定义动画

• 作用：执行一组CSS属性的自定义动画

• 使用方式：

  $(selector).animate({CSS定义},time,function())