背景

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

滑入滑出动画

1. 滑入动画

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

   使用方式：

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

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

2. 滑出动画

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

   使用方式：

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

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

3. 滑入滑出切换动画

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

   使用方式：

   $(selector).slideToggle(time,function) 
   $(selector).slideToggle(2000) 
   $(selector).slideToggle() 
   $(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) 
   $(selector).show(2000) 
   $(selector).show() 
   $(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())

链接: https://www.fly63.com/article/detial/790