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 OOP类与继承
Nov 15 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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 设计模式之 单例模式
2008/12/19 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
jquery 插件开发备注
2010/08/27 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
python requests.post带head和body的实例
2019/01/02 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python实现可变变量名方法详解
2019/07/01 Python
python匿名函数的使用方法解析
2019/10/10 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
计算机专业职业规划
2014/02/28 职场文书
七一党日活动总结
2014/07/08 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
中学生打架检讨书
2014/10/13 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
三峡人家导游词
2015/01/31 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android