【web前端 | jQuery】jQuery的效果

jQuery的效果

1:显示隐藏

1.1:show() 显示
show([speed,[easing],[fn]])

speed:预定速度 ,slow,normal,fast,1000ms

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

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

1.2:hide() 隐藏
hide([speed,[easing],[fn]])

同显示

1.3:toggle() 切换
toggle([speed,[easing],[fn]])

同显示

对角线隐藏,一般情况不加参数

2:滑动效果

2.1:slideDown() 向下滑动
slideDown([speed,[easing],[fn]])

speed:预定速度 ,slow,normal,fast,1000ms

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

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

2.2:slideUp() 向上滑动
slideUp([speed,[easing],[fn]])

同向下滑动

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

同向下滑动

3:事件切换

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

4:动画排队中的清除动画

stop()

必须写在动画的前面

5:淡入淡出效果

5.1:fadeIn() 淡入
fadeIn([speed,[easing],[fn]])

参数描述和上面的都一样

5.2:fadeOut() 淡出
fadeOut([speed,[easing],[fn]])
5.3:fadeToggle() 淡入淡出效果切换
fadeToggle([speed,[easing],[fn]])
5.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() 自定义动画

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

【叨叨】不是所有的样式都可以动画的改变(无中间值的样式不能动画的改变)

猜你喜欢

转载自blog.csdn.net/qq_43490212/article/details/111757648