jquery中动态效果小结


Posted in Javascript onDecember 16, 2010

动画效果,如果综合使用,还能使用简单的代码简单实现jquery的各种插件的效果

本文参考《《浅谈jquery》一书,加以整理,并结合自己的实际经验而成,可以看做一个 学习手册吧
编辑的时候代码全乱了,重新整理了下,可能代码格式还是有点乱,请见谅
显示(show),隐藏(hide)与组合(toggle)效果
1.show(speed,callback);
说明:这个方法可以显示隐藏的元素,其中参数也缺省,即写成show()这种形式
speed ---指定显示的速度 有3个参数可以选择 slow ,normal,fast,也可以自己指定数字(单位:毫秒)
callback---回调函数
下面是一个简单的例子

var callback=function(){ //alert("我是回调函数"); 
} 
var f1=function(){ 
// $("#t1").show(); 参数缺省 
// $("#t1").show("fast",callback); 显示速度为fast方式 
$("#t1").show(3000,callback);//自定义显示速度 3000毫秒 
}; 
$("#b1").click(f1);

Html代码
<input type="button" value="show" id="b1"/> <div id="t1" style="display: none;border: 1px solid gray;">dd</div>

2 hidden(speed,callback);
说明:相反与show方法,用于隐藏元素,参数与show相同,请参考3.1
下面的例子是点击一个按钮,隐藏显示的div
var callback=function(){ //alert("我是回调函数"); 
} 
var f1=function(){ 
// $("#t1").hide(); 参数缺省 
// $("#t1").hide("fast",callback); 显示速度为fast方式 
$("#t1").hide(3000,callback);//自定义显示速度 3000毫秒 
}; $("#b1").click(f1);

Html代码
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

3 toggle(speed,callback)
说明:这个可以理解为show()与hide()方法的结合体,轮换执行show()与hide()
比如:页面有一个隐藏的元素,第一次执行toggle(),显示元素,第二次执行,隐藏元素,第三次则又显示元素。。。
参数与3.1,相同
var callback=function(){ //alert("我是回调函数"); 
} 
var f1=function(){ 
//$("#t1").toggle(); // 参数缺省 
//$("#t1").toggle("fast",callback); //显示速度为fast方式 
$("#t1").toggle(3000,callback); 
}; 
$("#b1").click(f1);

Html代码
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

二.元素的滑动效果(向下展开,向上收缩)
1.slideDown(speed,[callback]);
说明:改变对象的height以实现向下展开的动画效果,常用与显示隐藏的元素
var callback=function(){ //alert("我是回调函数"); } 
var f1=function(){ 
//$("#t1").slideDown(); // 参数缺省 
//$("#t1").slideDown("fast",callback); //显示速度为fast方式 
$("#t1").slideDown(1000,callback); 
}; 
$("#b1").click(f1);

Html代码
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

2.slideUp(speed,[callback]););

说明:改变对象的height以实现向上展开的动画效果,常用隐藏显示的元素

var callback=function(){ 
//alert("我是回调函数"); 
} 
var f1=function(){ 
//$("#t1").slideUp(); 
// 参数缺省 //$("#t1").slideUp("fast",callback); //显示速度为fast方式 
$("#t1").slideUp(1000,callback); 
}; 
$("#b1").click(f1); 
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

3.slideToggle(speed,[callback]););

说明:可以说是以上2个方法的综合体,可替代toggle();如果你是仔细看了上面的几个方法介绍,就应该知道怎么用了,其实这几个方法的用法和参数都是相同的,只是展现的形式不同,例子我就不写了吧

三 元素的淡入淡出效果

1.fadeIn(speed,[callback]); 

说明:实现淡出效果,用于显示隐藏元素

2.fadeOut(speed,[callback]);

说明:实现淡入效果,用于隐藏显示的元素

 

3,fadeTo(speed,opactity,callback);

说明:该方法用于更改显示元素的透明度

参数:speed,callback于上面介绍的其他动画方法参数相同,opactity参数表示透明度,取值范围为0-1

var callback=function(){ 
//alert("我是回调函数"); 
} ; 
var f1=function(){ $("#t1").fadeTo(1000,0.3,callback);//0.3为透明度30% 
}; 
$("#b1").click(f1); 
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray">dd</div>

四.自定义动画

 

说明:从前面一,二,三可以看到,元素的显示有show,slideDown,fadeIn,隐藏有hide,slideUp,fadeOut的动画效果

,组合效果toggle,slideToggle,更改透明度效果fadeTo,实际需要中我们还可以自定义一些动画效果

 

自定义动画使用方法:animate(params,speed,callback);

 参数说明:params---一组包含作为动画属性和最终值哦样式属性和其值的集合

                  speed----同前面介绍方法中的speed属性

                 callback---回调函数

       注意:params的样式属性必须书写成驼峰形式,即比如margin-left应该些微marginLeft的形式

下面是一个例子

var callback=function(){ 
//alert("我是回调函数"); 
} ; 
var par={ height:"70%" }; 
var f1=function(){ 
$("#t1").animate(par,1000,callback); 
}; $("#b1").click(f1);

Html代码
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray">dd</div>

Javascript 相关文章推荐
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
简单实现js轮播图效果
Jul 14 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 #Javascript
Javascript学习笔记二 之 变量
Dec 15 #Javascript
Javascript学习笔记一 之 数据类型
Dec 15 #Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 #Javascript
jQuery Ajax使用 全解析
Dec 15 #Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 #Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 #Javascript
You might like
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
JavaScript 乱码问题
2009/08/06 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
p5.js入门教程之鼠标交互的示例
2018/03/16 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
python 多进程通信模块的简单实现
2014/02/20 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
采购求职信
2014/03/17 职场文书
档案工作汇报材料
2014/08/21 职场文书
群众路线对照检查材料
2014/09/22 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL