05-05 jq动画 - 图1

动画效果

1. 基本效果

  1. show([s,[e],[fn]])        显示隐藏的匹配元素
  2. hide([s,[e],[fn]])        隐藏显示的元素
  3. toggle([s],[e],[fn])    如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

  • 参数详解

    1. speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    2. easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
    3. fn        : 在动画完成时执行的函数，每个元素执行一次。

    2. 滑动效果

    1. slideDown([s],[e],[fn])        通过高度变化（向下增大）来动态地显示所有匹配的元素
    2. slideUp([s,[e],[fn]])        通过高度变化（向上减小）来动态地隐藏所有匹配的元素
    3. slideToggle([s],[e],[fn])    通过高度变化来切换所有匹配元素的可见性

  • 参数详解

    1. speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    2. easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
    3. fn        : 在动画完成时执行的函数，每个元素执行一次。

    3 淡入淡出效果

    1. fadeIn([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡入效果
    2. fadeOut([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡出效果
    3. fadeToggle([s,[e],[fn]])    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
    4. fadeTo([[s],o,[e],[fn]])    把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

  • 参数详解 ```javascript speed : 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) easing : (Optional) 用来指定切换效果，默认是”swing”，可用参数”linear” fn : 在动画完成时执行的函数，每个元素执行一次。

opacity : (用户fadeTo)一个0至1之间表示透明度的数字。

  1. <a name="b08e0a71"></a>
  2. ## 4 自定义动画
  3. ```javascript
  4. animate(p,[s],[e],[fn])
  • 参数详解
    1. params    : 一组包含作为动画属性和终值的样式属性和及其值的集合
    2. speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    3. easing    : 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
    4. fn        : 在动画完成时执行的函数，每个元素执行一次。

    5 动画控制

    ```javascript stop([c],[j]) 停止所有在指定元素上正在运行的动画 delay(d,[q]) 设置一个延时来推迟执行队列中之后的项目 finish([queue]) 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
  1. <a name="88c076bd"></a>
  2. ## 6 设置
  3. ```javascript
  4. //关闭页面上所有的动画
  5. jQuery.fx.off = true;