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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP递归的三种常用方式
2019/02/28 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
爱情保证书范文
2014/02/01 职场文书
党性观念心得体会
2014/09/03 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
活动费用申请报告
2015/05/15 职场文书
无婚姻登记记录证明
2015/06/18 职场文书