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字典探测用户名工具
Oct 05 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
JavaScript实现缓动动画
Nov 25 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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 加密解密内部算法
2010/04/22 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
php验证手机号码
2015/11/11 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
animation和transition的区别
2020/10/12 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
一些Solaris面试题
2015/12/22 面试题
《湘夫人》教学反思
2014/02/21 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
python解析照片拍摄时间进行图片整理
2022/07/23 Python