jQuery学习笔记之jQuery的动画


Posted in Javascript onDecember 22, 2010

一.系统预定义的动画函数

1.显示隐藏函数
show(); //显示元素(同时增加宽、高、不透明度)
hide(); //隐藏元素
执行hide()隐藏界面元素,相当于将css样式中的display:none.

我们也可以在函数中加入参数,具体如下:
show("slow");
除了slow取值外,还可以设置为normal,fast,分别代表时间为600,400,200毫秒

我们也可以加如具体时间取值。具体如下:

slow(1000);
这样代表时间完全显示出元素的时间间隔为1000毫秒

2.不透明度函数
fadeIn();//逐渐显示元素(只增加不透明度)
fadeOut();//逐渐隐退元素

3.高宽度函数
slideDown();//逐渐增加元素高度(只增加元素高度)
slideUp();//逐渐缩短元素高度

二.自定义动画函数

animate(params,speed,callback);
params:取值为一个样式属性和取值的映射
speed:速度
callback:动画完成时的执行函数

其中params的样式属性取值可以是多个属性,也可以是累增,累减的取值
例子:

$(function(){ 
$(#id1).click(function(){ 
$(this).animate({left:"+=500px",height:"200px"},3000,function(){ 
$(this).css("border","5px solid blue") 
}) 
}) 
})

1.停止元素动画
stop();
结束当前执行的动画,并立即执行下面定义的动画

2.判断是否在动画状态
is(":animate")

3.其他动画函数
toggle(speed,callback);//立即切换元素状态(高,宽,不透明度),如果隐藏则切换到显示,如果显示则切换的隐藏
sildeToggle(speed,callback);//改变高度方式切换元素状态
fadeto(speed,opacity,callback);切换到指定的不透明度值

Javascript 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 #Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 #Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 #Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 #Javascript
jQuery学习笔记之Helloworld
Dec 22 #Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 #Javascript
一个轻量级的javascript库 pj介绍
Dec 19 #Javascript
You might like
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
golang与PHP输出excel示例
2016/07/22 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
JS中操作JSON总结
2020/12/06 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
javascript关于继承解析
2016/05/10 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
JavaScript中0和""比较引发的问题
2016/05/26 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
python计算auc指标实例
2017/07/13 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
普通大学毕业生自荐信范文
2014/02/23 职场文书
高中军训感言600字
2014/03/11 职场文书
企业诚信承诺书
2014/05/23 职场文书
商务经理岗位职责
2014/07/30 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年教务工作总结
2015/05/23 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers