豆蔻年华款推动漫效率的优秀二级导航菜单Jquery特效
只是要用JavaScript手动达成动漫效果，必要编写制定特别复杂的代码。借使想要把动漫效果用函数封装起来方便复用，那思量的事情就更加多了。
本章节共享大器晚成段代码实例，它达成了手风琴情势开展和折叠导航菜单功用。…
动画
用JavaScript完结动漫，原理特别简单：大家只要求以固定的时日间隔（比如，0.1秒），每便把DOM成分的CSS样式修改一点（比如，高宽各扩展十三分风姿洒脱），看起来就好像动漫片了。
本章节享受豆蔻梢头段代码实例，它完成了手风琴情势开展和折叠导航菜单功效。
代码实举个例子下:
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.bkjia.com/" />
<title>帮客之家</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
background:gray;
font-size:14px;
padding:2px;
margin:2px;
}
dt{color:#FFF;}
dd a{
color:#000;
font-size:12px;
}
ul{
list-style:none;
padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
</head>
<body>
<dl>
<dt><a href="#">帮客之家一</a></dt>
<dd>
<ul>
<li><a href="#">div教程</a></li>
<li><a href="#">css教程</a></li>
<li><a href="#">jquery教程</a></li>
</ul>
</dd>
<dt><a href="#">帮客之家二</a></dt>
<dd>
<ul>
<li><a href="#">正则教程</a></li>
<li><a href="#">帮客之家</a></li>
</ul>
</dd>
<dt><a href="#">帮客之家三</a></dt>
<dd>
<ul>
<li><a href="#">ajax教程</a></li>
<li><a href="#">softwhy.com</a></li>
<li><a href="#">js教程</a></li>
</ul>
</dd>
</dl>
</body>
</html>
上边包车型地铁代码落成了我们的渴求，上边介绍一下它的完毕进程。
后生可畏.代码注释:
（1）.$(document卡塔尔(قطر.ready(function(卡塔尔国{}卡塔尔(قطر，当文书档案构造完全加载完毕再去施行函数中的代码。
（2）.$(“dd:not(:first卡塔尔(قطر”卡塔尔国.hide(卡塔尔(قطر，除第三个dd元素之外的有所dd成分隐敝，正是首先个导航菜单的子菜单是拓宽的，别的隐讳。
（3）.$(“dt
a”卡塔尔(قطر.click(function(){}卡塔尔，为dt成分下的a成分注册click事件管理函数。
（4）.$(“dd:visible”卡塔尔国.slideUp(“slow”卡塔尔(قطر，全部曾经显得的dd成分通过动漫方式减弱掩饰。
（5）.$(this卡塔尔.parent(卡塔尔(英语：State of Qatar).next(卡塔尔.slideDown(“slow”卡塔尔国，当前接连a成分的父成分也正是dt元素，dt成分的下一个成分正是二级菜单dd成分，将此菜单以动漫片情势进行。
（6）.return false，那个很主要，幸免链接的跳转动作。
如上所述是小编给我们分享基于jQuery实现以手风琴情势展开和折叠导航菜单，希望对大家全体助于。
导航菜单相比较实用，当然依旧选择非凡的，代码起码的，效果最棒的咯，各位童鞋请扫描哦，废话不说，
效果图如下，招待评价： 看代码： 复制代码
代码如下:
直接以无参数方式调用show(卡塔尔(英语：State of Qatar)和hide(卡塔尔(英语：State of Qatar)，会显得和掩瞒DOM成分
而是，只要传递三个时日参数进去，就改成了动画片：
var div = $('#test-show-hide');
div.hide(3000);//3秒中内逐渐消息
时间以毫秒为单位，但也可以是'slow'，'fast'这些字符串：
var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒钟内逐渐显示
toggle()方法则根据当前状态决定是show()还是hide()
你大概曾经看出来了，show(卡塔尔国和hide(卡塔尔(英语：State of Qatar)是从左上竞争渐开展或缩短的，而slideUp(卡塔尔和slideDown(卡塔尔(英语：State of Qatar)则是在笔直方向渐渐打开或减少的。
slideUp(卡塔尔国把三个可以知道的DOM成分收起来，效果跟拉上窗帘似的，slideDown(卡塔尔(قطر相反，而slideToggle(卡塔尔则依据成分是或不是可以预知来调控下一步动作：
var div = $('#test-slide');
div.slideUp(3000);
