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实现一个页面多个css样式实现
May 29 Javascript
DOM下的节点属性和操作小结
May 14 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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/10/09 PHP
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php类常量的使用详解
2013/06/08 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
Python基于time模块求程序运行时间的方法
2017/09/18 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
python实现大文本文件分割
2019/07/22 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Django重设Admin密码过程解析
2020/02/10 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
质检员的岗位职责
2013/11/15 职场文书
求职简历推荐信范文
2013/12/02 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
房产委托公证书
2014/04/08 职场文书
普通党员对照检查材料
2014/09/24 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书