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 跨域访问问题解决方法
Dec 02 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
浅析javascript 定时器
Dec 23 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
简述JS控制台的使用
Jul 15 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
js实现幻灯片轮播图
Aug 14 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
一个目录遍历函数
2006/10/09 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
js实现简易ATM功能
2020/10/27 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python计算IV值的示例讲解
2020/02/28 Python
QML实现钟表效果
2020/06/02 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
会计实习生自我鉴定
2013/12/12 职场文书
自我鉴定写作要点
2014/01/17 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
民主生活会发言材料
2014/10/20 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android