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 相关文章推荐
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
小程序实现筛子抽奖
May 26 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
YII路径的用法总结
2014/07/09 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python rstrip()方法实例详解
2018/11/11 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
妇产科护理心得体会
2016/01/22 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Redis Stream类型的使用详解
2021/11/11 Redis
Oracle 触发器trigger使用案例
2022/02/24 Oracle