jQuery 使用手册(五)

2016-02-19 13:56 3 1 收藏

想要天天向上，就要懂得享受学习。图老师为大家推荐jQuery 使用手册(五)，精彩的内容需要你们用心的阅读。还在等什么快点来看看吧！

【 tulaoshi.com - Web开发】

jQuery 使用手册，大家可以耐心的看完，就基本上入门了。

五：动态效果

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

img src="1.jpg" style="width:150px"/

a href="#" onClick='$("img").toggle("slow")'jQuery/a

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

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

点击连接后可以看到图片逐渐显示。
fadeIn(speed, callback) fadeOut(speed, callback) callback为函数，先通过调整透明度来显示或隐藏匹配对象，当调整结束后执行callback函数

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

点击连接后可以看到图片逐渐显示,显示完全后弹出对话框
fadeTo(speed, opacity, callback) 将匹配对象以speed速度调整倒透明度opacity，然后执行函数callback。Opacity为最终显示的透明度(0-1).

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）img src="1.jpg"/br
a 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"/
a href="#" onClick='$("img ").slideDown("slow")'jQuery/a

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

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

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

p id="a"Hello Again/pa href="#" onClick=' ("#a").hide()'jQuery/a

来源:http://www.tulaoshi.com/n/20160219/1605738.html

上一篇：王坤闓始,某╯年,某时、 - QQ伤感分组
下一篇： Douban的jquery使用分析

看过《jQuery 使用手册(五)》的人还看了以下文章更多>>

FreeBSD 使用手册

标签： Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理

FreeBSD 使用手册 http://www.freebsd.org.cn/snap/doc/zh_CN.GB2312/books/handbook/index.html 目前最为权威、内容最全的FreeBSD用户手册，适合各类学习freeBSD阶段的人，欢迎加入freeBSD学习的行列当中来............... 在chinaunix.net上的手册中心中有更多的不同内容BSD的用户使用手册‘ chinaunix.net的手册中心

GNU/Wget 使用手册

标签： Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理

wget是一个从网络上自动下载文件的自由工具。它支持HTTP，HTTPS和FTP协议，可以使用HTTP代理. 所谓的自动下载是指，wget可以在用户退出系统的之后在后台执行。这意味这你可以登录系统，启动一个wget下载任务，然后退出系统，wget将在后台执行直到任务完成，相对于其它大部分浏览器在下载大量数据时需要用户一直的参与，这省去了极大的麻烦。 w...

《神话》宝石使用手册

标签：网络游戏

《神话》宝石使用手册宝石雕琢通过洛阳（918，1052）的NPC宝石工匠多宝道人对话，选择“宝石雕琢”进入宝石雕琢功能界面，将宝石与雕琢符及需要雕琢的宝石拖入界面中即可实现功能。纯净精华宝石纯净守护宝石宝石合成宝石镶嵌宝石摘除《世界传说：光明神话3》系列人物介绍5...

window.showModalDialog使用手册

标签： Web开发

作者：norika 整理日期：2004年6月17日基本介绍： showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。 window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。使用方法： vReturnValue&...

MKV转换精灵使用手册

标签：电脑入门

还在为视频不能转换格式而烦恼吗？先如今，已出现各种视频转换工具为网民们解决了这一问题。那么视频转换工具下载后该如何使用呢？今日，图老师小编便以MKV转换精灵为例，详细为大家介绍下MKV转换精灵使用方法。 MKV转换精灵拥有强大的视频转换功能，支持几乎所有的视频格式，如 RM、RMVB、VOB、DAT、VCD、MPG、SVCD、ASF、MOV、QT、...

查看更多精彩>>