SMcraig L13 2017-02-02 23:22:59 jQuery动画
1014 0

“jQuery基础入门”实验报告

jQuery动画

jQuery 动画效果:

  1. jQuery动画的分类:效果不同用法一致。
  2. 基本动画效果:既有透明渐变,又有滑动效果。
  3. 滑动动画函数:仅使用滑动动画的效果。
  4. 渐入渐出动画效果。仅使用透明渐变的效果。

    基本动画函数:

  5. 基本动画函数主要包括:show() ,hide() ,toggle ();无参数状态表示不适用动画切换元素的显示状态,**当传递参数的时候表示在多少事件内执行完动画的效果。传递的参数可以为毫秒是数或者是预定义的英文字符串。**

    滑动动画函数:Sliding

  6. 名称 | 说明 | 举例 |
  7. SlideDown(speed,[callback]) | 通过高度的变化实现滑动的动画效果 | $("p").slideDown("slow"):以600毫秒的速度将段落缓缓的滑下。
  8. slideUp(speed,[ callback]) | 通过高度的变化实现向上隐藏所匹配的元素, | $("p').slideUp("slow"):以600毫秒的速度将段落收上:
  9. slideToggle(speed ,【callback】) 转换两者之间的变换状态。 | $("p").slideToggle("slow"): 以600毫秒的速度将段落滑上或者滑下。

    淡入淡出效果函数:Fading

  10. 名称 | 说明 | 举例
  11. fadeIn (speed, 【callback】), | 通过改变元素的不透明效果的程度来不改变元素的大小 | $("p").fadeIn("speed"): 600毫秒淡入;
  12. fadeOut (speed,[calback]),| 同上 | $("p").fadeOut("slow"); 600 毫秒执行淡出效果。
  13. fadeTo (speed,opacity ,【callback】) | 所有匹配的元素以渐进的方式执行制定的不透明度的大小。 *opacity 参数值范围是0-1 透明度 0.6 表示透明度60% *

自定义动画效果。

  1. 自定义函数Custom
  • animate( params ,[duartion] ,[easing] ,[callback]) :params :实现动画的个数(可选) ,duartion:实现动画的事件(可选); easing:需要的插件支持(可选)。
  • animate ( params , options):options :一组包含动画选项值的集合。

支持的格式如下:

  • duration: 与上面的 duration 参数相同
  • easing: 与上面的 easing 参数相同
  • complete :类型为 Function, 在动画完成时执行的函数
  • step: Callback
  • queue (Boolean): (默认值: true) 设定为 false 将使此动画不进入动画队列

    全局控制属性:

    jQuery.fx.off = true; 关闭所有jQuery动画效果。
最新评论
暂无评论~