jQuery入门第二章(显示隐藏动画)

基本概念

隐藏其实就是 display:none;

显示可以有很多种:display:block flex inline-block,block 最常见。

基础显示隐藏

 以上方法传入时间后才有动画动画效果,不传入时间没有动画效果。

淡入淡出显示隐藏

就是透明度的变化。

 没有传入时间也有动画效果,默认值是 400 毫秒

滑动显示隐藏

高度的变化

自定义动画

核心方法

.animate( 样式对象, 时间, 回调函数 )

 被称为动态的 .css( )

参考代码

// 有动画效果的变化
.animate({ width: '200px', height: '200px' });

// 没有动画效果
.css({ width: '200px', height: '200px' });

动画回调函数

执行时机,动画结束后,自动执行的函数,可以嵌套。

注意事项

驼峰写法

font-size    border-radius   中杆这类样式需要写成驼峰写法     fontSize    borderRadius 

动画使用原则

优先使用 CSS3 实现动画效果,CSS3 无法实现的再使用 JS 实现。

动画队列

动画队列概念:我们可以理解为 JQ 的动画是排队执行的,上一个动画结束后,才执行下一个动画。

常见 bug: 鼠标快速移入移出的时候,给同一个元素快速添加了多个动画,鼠标停止移动了,动画效果还在播放。

解决办法:在调用新的动画方法前,添加一个 .stop( ) 清空以前的动画,直接执行新的动画。

.stop()

上一章:jQuery入门第一章(jQuery初体验)

下一章:jQuery入门第三章(JQ 节点操作)

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海海呐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值