jQuery 使用手册(五)


Posted in Javascript onSeptember 23, 2009

:动态效果

       在将这部分之前我们先看个例子,相信做网页的朋友都遇到n级菜单的情景,但点击某菜单按钮时,如果它的子菜单是显示的,则隐藏子菜单,如果子菜单隐藏,则显示出来,传统的javascript做法是先用getElementById取出子菜单所在容器的id,在判断该容器的style.display是否等于none,如果等于则设为block,如果不等于这设为none,如果在将效果设置复杂一点,当点击按钮时,不是忽然隐藏和显示子菜单,而是高度平滑的转变,这时就要通过setTimeout来设置子菜单的height了,再复杂一点透明度也平滑的消失和显现,这时显现下来需要编写很多代码,如果js 基础不好的朋友可能只能从别人写好的代码拿过来修改了!jQuery实现上面效果只需要1句话就行,$("#a").toggle("slow"),,学完jQuery后还需要抄袭修改别人的代码吗?下面我们逐个介绍jQuery用于效果处理的方法。

hide()  隐藏匹配对象

<id="a">Hello Again</p><href="#" onClick=' ("#a").hide()'>jQuery</a>
当点击连接时,id为a的对象的display变为none。show() 显示匹配对象

hide(speed)  以一定的速度隐藏匹配对象,其大小(长宽)和透明度都逐渐变化到0,speed有3级("slow", "normal",  "fast"),也可以是自定义的速度。

show(speed)  以一定的速度显示匹配对象,其大小(长宽)和透明度都由0逐渐变化到正常

hide(speed, callback)  show(speed, callback) 当显示和隐藏变化结束后执行函数callback

toggle()    toggle(speed) 如果当前匹配对象隐藏,则显示他们,如果当前是显示的,就隐藏,toggle(speed),其大小(长宽)和透明度都随之逐渐变化。

jQuery 使用手册(五)<img src="1.jpg" style="width:150px"/>
jQuery 使用手册(五)
<href="#" onClick='$("img").toggle("slow")'>jQuery</a>

fadeIn(speeds)   fadeOut(speeds)  根据速度调整透明度来显示或隐藏匹配对象,注意有别于hide(speed)和show(speed),fadeIn和fadeOut都只调整透明度,不调整大小

<img src="1.jpg" style="display:none"/><href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>

点击连接后可以看到图片逐渐显示。

fadeIn(speed, callback)  fadeOut(speed, callback)   callback为函数,先通过调整透明度来显示或隐藏匹配对象,当调整结束后执行callback函数

<img src="1.jpg"/>
<href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>

点击连接后可以看到图片逐渐显示,显示完全后弹出对话框

fadeTo(speed, opacity, callback)  将匹配对象以speed速度调整倒透明度opacity,然后执行函数callback。Opacity为最终显示的透明度(0-1).

<img src="1.jpg"/><br>
<href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>

大家可以看一下自己看看效果,如果不用jQuery,编写原始javascript脚本可能很多代码!

slideDown(speeds)  将匹配对象的高度由0以指定速率平滑的变化到正常!

<img src="1.jpg" style="display:none"/>
<href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>

slideDown(speeds,callback)  将匹配对象的高度由0变化到正常!变化结束后执行函数callback

slideUp("slow")  slideUp(speed, callback) 匹配对象的高度由正常变化到0

slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到0,若为0,则逐渐变化到正常

Javascript 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
什么是JavaScript
Aug 13 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
jquery中post方法用法实例
Oct 21 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
jQuery 使用手册(四)
Sep 23 #Javascript
jQuery 使用手册(三)
Sep 23 #Javascript
jQuery 使用手册(二)
Sep 23 #Javascript
jQuery 使用手册(一)
Sep 23 #Javascript
JavaScript 变量命名规则
Sep 23 #Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 #Javascript
jquery ajax 登录验证实现代码
Sep 23 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
Javascript的闭包
2009/12/31 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
javascript中undefined的本质解析
2019/07/31 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
应届生煤化工求职信
2013/10/21 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android