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插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python入门之井字棋小游戏
2020/03/05 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
python 怎样进行内存管理
2020/11/10 Python
Django model class Meta原理解析
2020/11/14 Python
.net面试题
2016/09/17 面试题
linux面试题参考答案(4)
2014/09/21 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
大学生毕业的自我鉴定
2013/11/13 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
劲霸男装广告词
2014/03/21 职场文书
大学班级文化建设方案
2014/05/06 职场文书
电影雷锋观后感
2015/06/10 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技