4 jQuery04 动画

1、前端领域实现动画效果的技术:(1).css transition; (2).css keyframes; (3).js 定时器; (4).jQuery1和2也是js定时器; (5).jQuery3  animate();[底层也是定时器];[ 补充:requestAnimationFrame(); // 最新,最快、最流畅的动画技术,用户体验感特别好,其不采用定时器(定时器效率不高,容易卡死)]

2、常用动画/效果:

show(speed,e,callback);//参数选填:speed:normal/slow/fast;或者是时间(毫秒数);e: 默认是swing,也可为linear,表示速率函数;callback:表示回调函数; --->>> 同理其它也是如此;[normal/slow/fast都是时间的别名,类似于颜色值中red/blue/yellow是#f40以及颜色函数的别名]

[ 补充:js中涉及时间使用的都是毫秒数,因为计算机执行便是以毫秒计算;关于函数的参数问题,大多都是选填的,灵活性更好]

3、自定义动画animate(); 以及delay(); stop();的使用:

[animate();底层使用定时器修改指定的属性,但其只能修改有数值的,类似width/height; 却不能把display:none -> block]

[animate();//首个参数属性名,属性$值最好都加上引号;(jQuery中涉及对象的写法都是属性值要加双引号,css();animate({})都是如此)]

4、demo练习;

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,174评论 0 3
  • jQuery 安装 把 jQuery 添加到您的网页 如需使用 jQuery,您需要下载 jQuery 库(会在下...
    Clover园阅读 2,540评论 0 0
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,904评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,288评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,938评论 0 1

友情链接更多精彩内容