五
:动态效果
在将这部分之前我们先看个例子,相信做网页的朋友都遇到n级菜单的情景,但点击某菜单按钮时,如果它的子菜单是显示的,则隐藏子菜单,如果子菜单隐藏,则
显示出来,传统的javascript做法是先用getElementById取出子菜单所在容器的id,在判断该容器的style.display是否
等于none,如果等于则设为block,如果不等于这设为none,如果在将效果设置复杂一点,当点击按钮时,不是忽然隐藏和显示子菜单,而是高度平滑
的转变,这时就要通过setTimeout来设置子菜单的height了,再复杂一点透明度也平滑的消失和显现,这时显现下来需要编写很多代码,如果js
基础不好的朋友可能只能从别人写好的代码拿过来修改了!jQuery实现上面效果只需要1句话就行,$("#a").toggle("slow"),
,学完jQuery后还需要抄袭修改别人的代码吗?下面我们逐个介绍jQuery用于效果处理的方法。
hide()
隐藏匹配对象
<
p
id
="a"
>
Hello Again
</
p
><
a
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),其大小(长宽)和透明度都随之逐渐变化。
<
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).
<
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,则逐渐变化到正常
分享到:
相关推荐
jQuery使用手册,前端开发工具,亲测可用。
jQuery使用手册.docjQuery使用手册.docjQuery使用手册.doc
2-jQuery使用手册.doc 4-jQuery技巧总结.doc 5-jQuery常用方法事件属性.doc 3-使用 jQuery 简化 Ajax 开发.doc
jquery API 使用手册 jquery API 使用手册 jquery API 使用手册
jQuery使用手册.doc jQuery使用手册.doc jQuery使用手册.doc
jQuery使用手册. jQuery使用手册.jQuery使用手册.jQuery使用手册.
†jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又 想写出优 秀的js效果,jQuery可以 帮你达到目的!大家可以看看有keel翻译的jQuery入门
jquery使用手册
本压缩包内包含以下文件: jquery-1.12.4.js jquery-1.12.4.min.js jQuery1.11.0_20140330.chm jQueryAPI_CHM.CHM
jQuery手册jQuery手册jQuery手册
资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...
jquery用户使用手册,快速学习jquery.
JavaScript和jquery实战手册
资源名称:jQuery 中文手册 1.11.1内容简介:jquery中文手册 自从 2011 第1.7版到现在,这期间进行了很多次修改,因为作者相信:只要用心,哪怕一个小玩意都可以做到极致。 jQuery API 1.4.4 是一部比较详细的中文...
jQuery使用手册.doc jQuery使用手册.doc
jQuery1.3.1中文使用手册里面不但有API的详细说明,有很多jQuery使用的小例子,使用的时候可以方便的查找哦
jQuery API 3.3.1 中文手册,jQuery是一个JavaScript框架,自面世以来,以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等功能使多很多WEB编程者对其非常热爱,本手册旨在帮助广大...