博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
读<jquery 权威指南>[3]-动画
阅读量:5091 次
发布时间:2019-06-13

本文共 1547 字,大约阅读时间需要 5 分钟。

一、 显示与隐藏——hide(),show()

1. 方法:

  • hide(speed,[callback]);
  • show(speed,[callback]);

     说明:这两个方法还可以实现带动画效果的显示隐藏。speed可以是“slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒),可以直接是毫秒数。

      callback是动画执行完的回调函数。

2.实例:

     
jQuery
--write less,do more.  
显示
html

二、切换显示隐藏——toggle()

1. 方法

  • toggle():无参数,直接切换显示隐藏状态;
  • toggle(switch):switch是布尔值,true显示元素,false隐藏元素。
  • toggle(speed,[callback]):speed为切换速度;callback为动画效果执行之后的回调函数。

说明:当以动画效果展示时,元素的width,height,padding,margin都以动画形式展示。

2. 实例:

html

三、滑动效果——slide

  • slideUp(speed,[callback]):向上滑动,减小元素高度至0
  • slideDow(speed,[callback]):向下滑动,增大元素高度。
  • slideToggle(speed,[callback]):以动画效果切换元素高度。

四、淡入淡出——fade

1. 淡入淡出方法

  • fadeIn(speed,[callback]):淡入,透明度由0.0到1.0;
  • fadeOut(speed,[callback]):淡出,透明度由1.0到0.0;

实例:

html

2. fadeTo(speed,opacity,[callback]):以动画效果将透明度设置为一个指定值,还可以设置回调函数。

实例:

        
html

五、自定义动画——animate

1.方法 :

animate(params,[duration],[easing],[callback])

说明:param表示要调整的属性键值对,duration表示速度,easing表示动画插件,callback表示动画效果完成后的回调效果。

注意:

params的属性名要使用骆驼写法,例如font-size要写成fontSize。

如果想以动画形式移动元素位置,则position必须设置为relative或者absolute。

队列动画:在元素中执行一个或者多个animate方法。

转载于:https://www.cnblogs.com/janes/p/3533706.html

你可能感兴趣的文章
Kotlin动态图
查看>>
openstack pike 使用 linuxbridge + vxlan
查看>>
vim 括号匹配 以及各种跳转技巧
查看>>
正在学习或准备学习 Web 应用开发的初学者
查看>>
各大公司架构实践聚合
查看>>
西安前端交流会 - 【前端求职、就业、面试技巧】- 第5期-2015.3.29 报名了
查看>>
Linux-进程间通信(四): 域套接字
查看>>
jq check 复选变单选。
查看>>
一个数组中同时找到最大/最小值
查看>>
python终端下打印颜色
查看>>
《从Paxos到ZooKeeper 分布式一致性原理与实践》阅读【Leader选举】
查看>>
RPC框架基础概念理解以及使用初体验
查看>>
从零开始系列之vue全家桶(1)安装前期准备nodejs+cnpm+webpack+vue-cli+vue-router
查看>>
ASP.NET缓存 Cache之数据缓存
查看>>
bzoj3529: [Sdoi2014]数表
查看>>
SSH三大框架 整合必备jar包
查看>>
什么是电子商务?电子商务面临的几个关键问题及解决办法?电子商务的核心是什么?B2C电子商务运营的核心是什么 ?...
查看>>
Jsp抓取页面内容
查看>>
AJAX与servlet的组合,最原始的
查看>>
大三上学期软件工程作业之点餐系统(网页版)的一些心得
查看>>