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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
JS实现秒杀倒计时特效
Jan 02 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php字符串函数学习之substr()
2015/03/27 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
jquery 插件开发备注
2010/08/27 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
pandas 数据类型转换的实现
2020/12/29 Python
金融专业应届生求职信
2013/11/02 职场文书
应届生英语教师求职信
2013/11/05 职场文书
护士检查书
2014/01/17 职场文书
建议书标准格式
2014/03/12 职场文书
重点工程汇报材料
2014/08/27 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
springboot实现string转json json里面带数组
2022/06/16 Java/Android
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技