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 相关文章推荐
基于jquery的$.ajax async使用
Oct 19 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
在 HTML 页面中使用 React的场景分析
Jan 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python基于百度云文字识别API
2018/12/13 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
浅析Django中关于session的使用
2019/12/30 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
单位门卫岗位职责
2013/12/20 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书