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 相关文章推荐
重定向实现代码
Nov 20 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
input输入框内容实时监测(附代码)
Aug 15 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 XML操作类DOMDocument
2009/12/16 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
Prototype Function对象 学习
2009/07/12 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python清除函数占用的内存方法
2018/06/25 Python
Python3标准库总结
2019/02/19 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Pandas的数据过滤实现
2021/01/15 Python
你常见到的runtime exception
2016/09/05 面试题
教师党员公开承诺事项
2014/05/28 职场文书
学校安全防火方案
2014/06/07 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
群众路线调研报告范文
2014/11/03 职场文书
捐资助学感谢信
2015/01/21 职场文书
金陵十三钗观后感
2015/06/04 职场文书
地道战观后感
2015/06/04 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
nginx 配置指令之location使用详解
2022/05/25 Servers
python实现双向链表原理
2022/05/25 Python