jQuery-动效

jQuery显示与隐藏

• show([speed,[easing],[fn]])
  • 显示隐藏的匹配元素
  • 内部的实现原理是根据当前操作的元素是块级还是行内决定的
  • 块级内部调用display:block;,行内内部调用display:inline
  • 参数
    • speed 字串符速度slow,normal,fast或表示动画时长的毫秒数值
    • easing用来指定切换效果，默认是swing，可用参数linear
    • fn 在动画完成时执行的回调函数，每个元素执行一次

• hide([speed,[easing],[fn]])
  • 隐藏显示的元素
  • 参数
    • speed 字串符速度slow,normal,fast或表示动画时长的毫秒数值
    • easing用来指定切换效果，默认是swing，可用参数linear
    • fn 在动画完成时执行的回调函数，每个元素执行一次

• toggle([speed],[easing],[fn])
  • 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
  • 参数
    • speed 字串符速度slow,normal,fast或表示动画时长的毫秒数值
    • easing用来指定切换效果，默认是swing，可用参数linear
    • fn 在动画完成时执行的回调函数，每个元素执行一次

jQuery滑动效果

• slideDown([speed],[easing],[fn])
  • 通过高度变化（向下增大）来动态地显示所有匹配的元素
  • 参数与显示隐藏函数参数一样

• slideUp([speed,[easing],[fn]])
  • 通过高度变化（向下增大）来动态地隐藏所有匹配的元素
  • 参数与显示隐藏函数参数一样

• slideToggle([speed],[easing],[fn])
  • 通过高度变化来切换所有匹配元素的可见性
  • 参数与显示隐藏函数参数一样

jQuery淡入淡出

参数、注意事项和显示隐藏动画一模一样, 只不过动画效果不一样而已

• fadeIn([speed],[easing],[fn])
  • 淡入动画

• fadeOut([speed],[easing],[fn])
  • 淡出动画

• fadeToggle([speed,[easing],[fn]])
  • 切换动画(显示变淡出,不显示变淡入)

• fadeTo([[speed],opacity,[easing],[fn]])
  • 淡入到指定透明度动画
  • 通过第二个参数,淡入到指定的透明度(取值范围0~1)

jQuery自定义动画

• animate(params,[speed],[easing],[fn])
  • 用于创建自定义动画的函数
  • 参数
    • 第一个参数: 接收一个对象, 可以在对象中修改属性
    • 第二个参数: 指定动画时长
    • 第三个参数: 指定动画节奏, 默认就是swing
    • 第四个参数: 动画执行完毕之后的回调函数

• delay(duration,[queueName])
  • 设置一个延时来推迟执行队列中之后的项目

• stop([clearQueue],[jumpToEnd])
  • 停止所有在指定元素上正在运行的动画

• finish( [queue ] )
  • 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
  • 当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除

jQuery动画设置