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 相关文章推荐
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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
用缓存实现静态页面的测试
2006/12/06 PHP
php自动适应范围的分页代码
2008/08/05 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python统计字符的个数代码实例
2020/02/07 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
艺术系应届生的自我评价
2013/10/19 职场文书
女大学生自我鉴定
2013/12/09 职场文书
廉洁自律承诺书
2014/03/27 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
放飞理想演讲稿
2014/09/09 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
自我推荐信格式模板
2015/03/24 职场文书
学生病假条范文
2015/08/17 职场文书