jQuery效果

mac2024-08-10  54

 

jQuery给我们封装了很多动画效果,最为常见的如下:

显示隐藏滑动淡入淡出自定义动画show()slideDown()fadeIn()animate()hide()slideUp()fadeOut() toggle()slideToggle()fadeToggle()   fadeTo() 

1. 显示隐藏效果

1. 显示语法规范

show([speed,[easing],[fn]])

  显示参数

(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

2. 隐藏语法规范

hide([speed,[easing],[fn]])

  隐藏参数

(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

3. 切换语法规范

toggle([speed,[easing],[fn]])

   切换参数

(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

     建议:平时一般不带参数,直接显示隐藏即可。

2. 滑动效果

1. 下滑效果语法规范

slideDown([speed,[easing],[fn]])

    下滑效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

2. 上滑效果语法规范

slideUp([speed,[easing],[fn]])

  上滑效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

3. 滑动切换效果语法规范

slideToggle([speed,[easing],[fn]])

  滑动切换效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

3. 事件切换

hover([over,]out)

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)

(2)out:鼠标移出元素要触发的函数(相当于mouseleave)

(3)如果只写一个函数,则鼠标经过和离开都会触发它

4. 动画队列及其停止排队方法

1. 动画或效果队列

    动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行

2. 停止排队

stop()

(1)stop() 方法用于停止动画或效果。

(2)  注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画

5. 淡入淡出效果

1. 淡入效果语法规范

fadeIn([speed,[easing],[fn]])

   淡入效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

2. 淡出效果语法规范

fadeOut([speed,[easing],[fn]])

  淡出效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次。

3. 淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]])

  淡入淡出切换效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次

4. 渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]])

  效果参数

(1)opacity 透明度必须写,取值 0~1 之间。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。必须写

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn:  回调函数,在动画完成时执行的函数,每个元素执行一次

6. 自定义动画 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:  回调函数,在动画完成时执行的函数,每个元素执行一次;

最新回复(0)