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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
js动态生成表格(节点操作)
Jan 12 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实现快速排序法函数代码
2012/08/27 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
jquery 指南/入门基础
2007/11/30 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
pyramid配置session的方法教程
2013/11/27 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
opencv与numpy的图像基本操作
2019/03/08 Python
详解python:time模块用法
2019/03/25 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
师范大学应届生求职信
2013/11/21 职场文书
房产代理公证处委托书
2014/04/04 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
行政管理专业求职信
2014/07/06 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
艺术节开幕词
2015/01/28 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
通知格式
2015/04/27 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏