本文实例讲述了JQuery特殊效果和链式调用操作。分享给大家供大家参考，具体如下：
JQuery的特殊效果
fadeOut()淡入
fadeToggle()切换淡入淡出
hide() 隐藏元素
show() 现实元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle()依次展开或者卷起某个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: gold;
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$('.box').fadeIn(1000,'swing',function () {
//可以加一个回调函数
alert('done');
});
})
})
</script>
</head>
<body>
<input type="button" name="" value="动画" id="btn">
<div class="box"></div>
</body>
</html>点击按钮，元素淡出，完成之后弹出done，不知道为什么，没有运行出来，可能是浏览器的问题。
链式调用-层级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
font-family: 'Microsoft Yahei';
}
body ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.menu{
width: 300px;
height: 300px;
}
.menu .level1,.menu li ul a {
display: block;
width: 300px;
height: 30px;
line-height: 30;
text-decoration: none;
background-color: #3366cc;
color: #fff;
font-size: 16px;
text-indent: 10px;
}
.menu .level1{
border-bottom: 1px solid #afc6f6;
}
.menu li ul a {
font-size: 14px;
text-indent: 20px;
background-color: #7aa1ef;
}
.menu li ul li{
border-bottom: 1px solid #afc6f6;
}
.menu li ul {
display: none;
}
.menu li ul li a:hover{
background-color: #f6b544;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.level1').click(function () {
$(this).next().stop().slideToggle().parent().sibling().children('ul').slideUp();
})
})
</script>
</head>
<body>
<ul class="menu">
