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 相关文章推荐
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
JavaScript函数IIFE使用详解
Oct 21 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/10/03 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
微信小程序 上传头像的实例详解
2017/10/27 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
js数组去重的方法总结
2019/01/18 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
12岁生日感言
2014/01/21 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
教师师德承诺书2016
2016/03/25 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
详解python网络进程
2021/06/15 Python
MySQL创建管理LIST分区
2022/04/13 MySQL