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 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
js调用css属性写法
Sep 21 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
关于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实现的封装验证码类详解
2013/06/18 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
取得一定长度的内容,处理中文
2006/12/20 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
Python List cmp()知识点总结
2019/02/18 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
秦兵马俑教学反思
2014/02/07 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
驻村工作先进事迹
2014/08/14 职场文书
2014年信用社工作总结
2014/11/25 职场文书
补充协议书
2015/01/28 职场文书
社区干部培训心得体会
2016/01/06 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技