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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
js轮播图的插件化封装详解
Jul 17 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
PM2自动部署代码步骤流程总结
Dec 10 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一些公用函数的集合
2008/03/27 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Koa 使用小技巧(小结)
2018/10/22 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
python 简易计算器程序,代码就几行
2009/08/29 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python中itertools的用法详解
2020/02/07 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
班风口号
2014/06/18 职场文书
合同意向书范本
2014/07/30 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
护士年终考核评语
2014/12/31 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
创业计划书之面包店
2019/09/12 职场文书