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 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
taro开发微信小程序的实践
May 21 Javascript
JS中的模糊查询功能
Dec 08 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
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php中stdClass的用法分析
2015/02/27 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python列表推导式操作解析
2019/11/26 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
Why do we need Unit test
2013/01/03 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
教师党性分析材料
2014/02/04 职场文书
10的分与合教学反思
2014/04/30 职场文书
产品发布会策划方案
2014/05/12 职场文书
物流管理专业自荐信
2014/06/23 职场文书
2014年团工作总结
2014/11/27 职场文书
个人廉政承诺书
2015/04/28 职场文书
幸福来敲门观后感
2015/06/04 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python