jQuery学习教程四:jQuery 效果 - 隐藏和显示
2017-03-22 11:32
621 查看
实例
jQuery hide()演示一个简单的 jQuery hide() 方法。<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果您点击我,我会消失。</p> <p>点击我,我会消失。</p> <p>也要点击我哦。</p> </body> </html>
jQuery
hide()另一个 hide() 演示。如何隐藏部分文本。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <style type="text/css"> div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <h3>中国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人:张先生<br /> 北三环中路 100 号<br /> 北京</p> </div> <h3>美国办事处</h3> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>联系人:David<br /> 第五大街 200 号<br /> 纽约</p> </div> </body> </html>
jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p id="p1">如果点击“隐藏”按钮,我就会消失。</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> </body> </html>
语法:
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:
实例
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); </script> </head> <body> <button type="button">隐藏</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素:
实例
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <button type="button">切换</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery 效果函数
方法 | 描述 |
---|---|
animate() | 对被选元素应用“自定义”的动画 |
clearQueue() | 对被选元素移除所有排队的函数(仍未运行的) |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 运行被选元素的下一个排队函数 |
fadeIn() | 逐渐改变被选元素的不透明度,从隐藏到可见 |
fadeOut() | 逐渐改变被选元素的不透明度,从可见到隐藏 |
fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
hide() | 隐藏被选的元素 |
queue() | 显示被选元素的排队函数 |
show() | 显示被选的元素 |
slideDown() | 通过调整高度来滑动显示被选元素 |
slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
slideUp() | 通过调整高度来滑动隐藏被选元素 |
stop() | 停止在被选元素上运行动画 |
toggle() | 对被选元素进行隐藏和显示的切换 |
相关文章推荐
- learning jQuery 学习笔记八(+jQuery 1.4.1 API)-- 效果-基本的隐藏、显示和效果
- jQuery学习(四) 效果——隐藏/显示
- jquery教程:仿miqike.com首页"热门标签"层绝对定位 点击隐藏/点击显示JS效果
- JQuery学习笔记之隐藏和显示效果
- jQuery学习_动作效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)
- JQuery 显示全部及隐藏部分的效果
- jQuery 效果 - slideToggle() 方法 (在隐藏和显示之间切换)
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- JQuery 淡出、 动画、显示/隐藏切换等效果
- 鼠标放上去显示全部文字,不放上去,显示部分文字jquery效果,包括隐藏部分文字
- jQuery实现的显示 隐藏效果
- jQuery插件:toggleElements.js,隐藏/显示层的折叠效果插件
- jQuery 网易相册鼠标移动显示隐藏效果实现代码
- jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
- jquery 的显示隐藏效果 .slideToggle()
- jquery+css实现导航浮动并全宽显示效果教程
- jquery菜单滑动及显示隐藏效果
- 【js与jquery】左侧导航模块的显示与隐藏效果
- JQuery 动画显示和隐藏效果