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 相关文章推荐
Underscore源码分析
Dec 30 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
Javascript之Math对象详解
Jun 07 Javascript
javascript常用经典算法详解
Jan 11 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
实现vuex原理的示例
Oct 21 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
js实现车辆管理系统
2020/08/26 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
深入理解Python异常处理的哲学
2019/02/01 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
端午节活动总结
2014/08/26 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书