Jquery之基础知识开篇（五）--jQuery中的动画

​1. show和hide方法

• ("element").show(speed[, callback])-显示element元素
• ("element").hide(speed[, callback])-隐藏element元素
  [speed] 可取 slow normal fast 或者 直接输入数字(单位：毫秒)
  [callback] 动画完成时执行的回调函数，每个元素执行一次
  注意：
  (1)show() 和 hide() 方法同时修改多个样式属性即高度、宽度和不透明度
  (2)hide() 方法在将内容的 display 属性值设置为 none 之前，会记住原先的 display 属性值，当调用 show() 方法时，会根据之前记住的值来显示元素

​2.淡入淡出： fadeIn方法和fadeOut方法

• ("element").fadeIn(speed[, callback])-渐入，在指定事件内增加元素的不透明度
• ("element").fadeOut(speed[, callback])-渐出，在指定事件内降低元素的不透明度
• fadeTo(speed,opcity,[callback]) //speed,[callback]与show()类似，opcity为透明度,范围0.0-1.0
• fadeToggle(speed, [callback])-淡入淡出切换
  注意：
  fadeIn() 和 fadeOut() 方法只改变元素的不透明度

​3. 滑动：slideUp方法和slideDown方法

• ("element").slideUp(speed[, callback])-元素由下到上缩短隐藏
• ("element").slideDown(speed[, callback])-元素由上至下延伸显示
• slideToggle(speed, [callback])-滑动切换
  注意：
  slideUp() 和 slideDown() 只改变元素的高度

​4. 动画参数

• 在 jQuery 中的任何动画效果，都可以指定 3 种速度参数，即 “slow”、“normal” 和 “fast”（时间长度分别是 0.6 秒、0.4 秒和 0.2 秒）；也可以使用数组作为时间参数（单位：毫秒）

​5. 自定义动画

animate(params, [speed], [easing], [callback]);
params 动画属性集合
[speed] 动画的速度，slow，normal，fast，或者数字（单位毫秒）
[easing] 动画表现效果，swing 或者 linear
[callback] 动画完成时执行的回调函数，每个元素执行一次
注意：
一个元素可以执行多个animate,从而形成动画队列，依次执行

​6. 停止动画和判断是否处于动画状态

(1)停止元素的动画

• stop([clearQueue]，[gotoEnd]);
  参数都为可选参数
  clearQueue表示boolean值，是否清空未执行完的动画队列
  gotoEnd表示boolean值，是否立即完成正在执行的动画

(2)判断元素是否处于动画状态

• (element).is(":animated")

(3)延时动画

• delay(duration, [queueName])
  duration 延时的时间，单位ms
  [queueName] 队列名