No.34 jQuery效果

jQuery 给我们封装了很多动画效果。


jQuery 动画效果

一、显示隐藏效果

  1. 显示语法规范
    show([speed,[easing],[fn]])

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

  3. 隐藏语法规范
    hide([speed,[easing],[fn]])

  4. 隐藏参数
    (1)参数都可以省略, 无动画直接显示。
    (2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
    (3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
    (4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

  5. 切换语法规范
    toggle([speed,[easing],[fn]])

  6. 切换参数
    (1)参数都可以省略, 无动画直接显示。
    (2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
    (3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
    (4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
    建议:平时一般不带参数,直接显示隐藏即可。

二、滑动效果

  1. 下滑效果语法规范
    slideDown([speed,[easing],[fn]])

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

  3. 上滑效果语法规范
    slideUp([speed,[easing],[fn]])

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

  5. 滑动切换效果语法规范
    slideToggle([speed,[easing],[fn]])

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

三、淡入淡出效果

  1. 淡入效果语法规范
    fadeIn([speed,[easing],[fn]])

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

  3. 淡出效果语法规范
    fadeOut([speed,[easing],[fn]])

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

  5. 淡入淡出切换效果语法规范
    fadeToggle([speed,[easing],[fn]])

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

  7. 渐进方式调整到指定的不透明度
    fadeTo([[speed],opacity,[easing],[fn]])

  8. 效果参数
    (1)opacity 透明度必须写,取值 0~1 之间。
    (2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。必须写
    (3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
    (4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

四、自定义动画 animate

  1. 语法
    animate(params,[speed],[easing],[fn])

  2. 参数
    (1)params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
    (2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。
    (3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
    (4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

要想页面做动画,
$("document").animate({scrollTop: 0})不受支持,
应选用如下语法:
$("body,html").animate({scrollTop: 0})

五、事件切换

hover([over,]out)

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)
(2)out:鼠标移出元素要触发的函数(相当于mouseleave)
(3)如果只写一个函数,则鼠标经过和离开都会触发它

六、动画队列及其停止排队方法

  1. 动画或效果队列
    动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
  2. 停止排队
    stop()
    (1)stop() 方法用于停止动画或效果。
    (2) 注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 题目1: jQuery 能做什么? 选择网页元素改变结果集元素的操作:取值和赋值元素的操作:移动元素的操作:复制、...
    QQQQQCY阅读 1,540评论 0 1
  • jQuery jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对...
    YQY_苑阅读 1,837评论 0 1
  • JQ操作DOM属性节点相关方法(包含类的操作) 属性节点就是指dom元素的属性 一般如果是标签自身自带的属性,我们...
    Lins7阅读 3,385评论 0 0
  • 前言 jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装...
    IT老马阅读 5,084评论 1 4
  • 事件绑定找到Dom元素,jQuery中事件绑定有两种方式 ("").on(eventName, funcion()...
    小懵没被占用阅读 3,287评论 0 0

友情链接更多精彩内容