/*
*显示
*.show(speed, [callback]);以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。有speed参数和可选callback参数,speed表示显示的时间毫秒,后面的是可选函数.
*$("#www").show(1000,function(){alert("回调函数");});这样1秒后第一个层显示全部,然后弹出"回调函数" 对话框.speed,三种预定速度之一的字符串("slow", "normal", or "fast")分别是600ms,400ms和200ms
*/
| 代码如下 | 复制代码 |
| function show(){ $("#divObj").show(); } |
|
/*.hide(speed, [callback]);以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数,参考上面的*/
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
| 代码如下 | 复制代码 |
| function fadeIn(){ $("#divObj").fadeIn(2000);//淡入,参数可以无,参数说明同上 } function fadeOut(){ $("#divObj").fadeOut(2000);//淡出,参数可以无,参数说明同上 } |
|
/*.slideDown(speed, [callback]);窗帘效果展开;通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。回调函数是可选的,speed也有上面的三种预定速度,也可以是数值.*/
| 代码如下 | 复制代码 |
| function slideDown(){ $("#divObj").slideDown(); } |
|
/*.slideUp(speed, [callback]);窗帘效果折叠;通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数 同上不过是用来隐藏的*/
| 代码如下 | 复制代码 |
| function slideUp(){ $("#divObj").slideUp(); } |
|
/*
*窗帘效果的切换,参数可以无,参数说明同上,如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
*toggle(speed, [callback]);一样的多了speed和callback函数.跟toogle()一样,不过多了时间和回调函数
*/
| 代码如下 | 复制代码 |
| function slideToggle(){ $("#divObj").slideToggle(2000); } |
|
/*
*显示隐藏切换,参数可以无,参数说明同上;
*.toggle(switch);根据switch参数切换元素的可见状态（ture为可见，false为隐藏）。switch可以用function()返回函数决定
*.slideToggle(speed, [callback]);设置时间来通过高度变化,切换触发显示隐藏.参数同上.
*/
| 代码如下 | 复制代码 |
| function toggle(){ $("#divObj").toggle(2000); } |
|
实例
可以应用与文章列表摘要模式-列表模式切换：
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN"> <head> <script src="http:/http://www.111cn.net/jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="texthttp://www.111cn.net/javascript"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Simple JQuery Collapsing menu</title> </head> <body> <script type="text/javascript"> $(function() { var i = 1; $("#mostrar").click(function(event) { if(i%2 == 1) $("#mostrar").html("简洁模式"); else $("#mostrar").html("摘要模式"); event.preventDefault(); $(".box2").slideToggle(); i++; }); }); </script> <style type="text/css"> #mostrar{ display:block; width:70%; padding:5px; border:2px solid #D0E8F4; background-color:#ECF8FD; } h2 { font-size:14px;} .itembox { border:#99CCCC solid 1px; margin-bottom:10px; padding:10px;} </style> <a href="#" id="mostrar">摘要模式</a> <div id="content" style="width:70%"> <div class="news-list"> <div class="itembox itembox2"> <div class="box1"> <h2><a href="#" target="_blank">站长要想摆脱搜索 塑造网络品牌是前提</a></h2></div> <div class="box2">我相信来Admin5.com逛的站长们的流量大多都是靠搜索来的，在国内如果谈搜索百度是不能不谈的，谁让他是中国的老大呢，但是随着百度算法的一再的调整，靠搜索靠百度为生也越来越难，当然也不排除那些seo/seo.html" target="_blank">网站优化中的大侠们，比较百度的首页的位置是有限的，高手也是少之.... [<a href="/article/20090809/171937.shtml" target="_blank">阅读全文</a>] <div class="box3">分类：<span class="catspan"><a href="#">美国生活</a></span>作者：<span class="boxspan">YAO YINGYING</span>点击：<span class="boxspan">47082</span>评论：<span class="boxspan">319</span></div> </div> </div> <div class="itembox"> <div class="box1"> <h2><a href="#" target="_blank">站长 请不要忽视了你的网站LOGO</a></h2></div> <div class="box2">通常，我们观察一个人，首先看到的是他的相貌，其次是身材、衣着(色狼尤是如此)。我们有可能一个星期都不洗澡，但每天都要洗脸，男生要刮胡子，女生要化妆，目的只有一个，要把最漂亮的一面展示给别人我要问问同在.... [<a href="#" target="_blank">阅读全文</a>] <div class="box3">分类：<span class="catspan"><a href="#">美国生活</a></span>作者：<span class="boxspan">YAO YINGYING</span>点击：<span class="boxspan">47082</span>评论：<span class="boxspan">319</span></div> </div> </div> <div class="itembox itembox2"> <div class="box1"> <h2><a href="#" target="_blank">新站长开站要谨记的三条真理</a></h2></div> <div style="display: block;" class="box2">一：坚持才能胜利 可能大家都跟我开始的时候一样，满怀信心的建了一个站，但是过了没几天觉得很灰心。 为什么呢？因为没人来“欣赏”它嘛！就会开始怀疑？怀疑哪些呢？怀疑是不是自己的站不好看？ 用的网站程序不对？是.... [<a href="#" target="_blank">阅读全文</a>] <div class="box3">分类：<span class="catspan"><a href="#">美国生活</a></span>作者：<span class="boxspan">YAO YINGYING</span>点击：<span class="boxspan">47082</span>评论：<span class="boxspan">319</span></div> </div> </div> <div class="itembox"> <div class="box1"> <h2><a href="#" target="_blank">“QQ之父”马化腾自述：创业靠自己</a></h2></div> <div class="box2">去年是改革开放30周年，今年是新中国成立60周年，腾讯也迎来自己的第一个十年，中国从大国走向强国，互联网蓬勃生长，腾讯的发展离不开这样的大背景。 1984年，我是上初二时来到深圳的，那时候深圳刚刚开放，这么多年.... [<a href="/article/20090807/171530.shtml" target="_blank">阅读全文</a>] <div class="box3">分类：<span class="catspan"><a href="#">美国生活</a></span>作者：<span class="boxspan">YAO YINGYING</span>点击：<span class="boxspan">47082</span>评论：<span class="boxspan">319</span></div> </div> </div> </div> </div> </body> </html> |
|