当前位置: 首页 > news >正文

【Jquery-04】jq中动画效果

文章目录

  • jQuery效果
    • 3.1显示隐藏效果
    • 3.2滑动效果
    • 3.3事件切换
    • 3.4自定义动画

jQuery效果

最为常见的效果

效果 方法
显示隐藏 show()\hide()\toggle()
滑动 slideDown()、slideUp()、slideToggle()
淡入淡出 fadeIn()、fadeOut()、fadeToggle()、fadeTo()

自定义动画 animate()

3.1显示隐藏效果

1.语法格式
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
显示参数
1)参数都可以省略,无动画直接显示

2)speed:三种预定速度之一的字符串(“show”、“normal”、“or”、“fast”)或表示动画市场的毫秒值1000

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

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

3.2滑动效果

slideDown([speed,[easing],[fn]])//下滑效果
slideUp([speed,[easing],[fn]])//上滑效果
slideToggle([speed,[easing],[fn]])//滑动效果
参数效果同上

3.3事件切换

hover([over],out)//事件切换
over:鼠标移动到元素上触发的函数(相当于mouseenter)

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

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

3.4动画队列及停止排队的方法
动画一旦触发就会被执行,如果多次触发,就造成多个动画或者效果排队执行

1.停止排队
可以接收两个参数:第一个是否清空当前动画队列,布尔类型,第二个参数是否立即完成当前动画也是布尔类型,当我们不传参数,默认是false,表示立即进入下一个动画,停止当前的动画,使用最多的情况是不传参

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

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

3.5淡入淡出效果
1.淡入淡出效果
fadeIn([speed,[easing],[fn]])//淡入效果
fadeOut([speed,[easing],[fn]])//淡出效果
fadeToggle([speed,[easing],[fn]])//淡入淡出
参数效果同上

2.渐进方式调整到指定不透明度
fadeTo([[speend],opacity,[easing],[fn]])
参数:==opacity:==透明度值必写,取值0-1之间

speed:三种预定速度之一的字符串(“show”,“normal”,“fast”)或表示动画时长的毫秒数

3.4自定义动画

animate({},[speed],[easing],[fn])
参数:

1.params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要,采取双驼峰命名法borderLeft,其余参数可以省略,传入的是对象形式,一组包含作为动画的属性及其值的集合,left,right,top。bottom一类适用于定位的属性,margin,padding,width,height等高度或者宽度,fontSize border等,但是backgroundColor 不可以使用,需引入插件之后才能使用

3.5延迟的内容
delay(设置毫秒数) 设置一个延迟来推迟执行队列中之后的项目,等待设置的毫秒数结束之后,再开始执行下面的内容

$(“.box”).delay(2000).fadeOut(200)

相关文章:

  • 福建省网站建设绩效排名/历下区百度seo
  • 村庄建设网站/公众号软文素材
  • 贡井区建设局网站/站长工具seo推广
  • 什么是官网购物网站/百度app客服人工电话
  • h5自适应网站建设/郑州网站优化平台
  • wordpress 换行/广州seo优化
  • 【Vue3】手把手教你创建前端项目 Vue3 + Ts + vite + pinia
  • 《多功能计算器》 Java程序设计 课程设计
  • U盘资料损坏 在线调取资料帮大忙
  • 【MySQL性能优化系列】select count(*)走二级索引比主键索引快几百倍,你敢信?
  • Node.js入门
  • C---指针
  • MySQL缓存策略详解
  • CentOS服务端命令大全
  • 卷积神经网络CNN里经典网络模型之 AlexNet全网最详解(理论篇)
  • 一口气说出 Redis 16 个常见使用场景
  • 多目标优化算法合集
  • 重装系统后如何在win10系统打开命令行窗口