<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>特殊效果</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ ???$(‘#btn‘).click(function(){ ???????/*fadeOut(时间，函数)*/ ???????/*$(‘.div1‘).fadeOut(1000);*/ ???????/*fadeToggle淡出淡入*/ ???????/*$(‘.div1‘).fadeToggle(1000);*/ ???????/*toggle()切换元素可视状态*/ ???????/*$(‘.div1‘).toggle(1000);*/ ???????/*hide()隐藏*/ ???????/*$(‘.div1‘).hide(1000);*/ ???????/*show()显示元素*/ ???????/*$(‘.div1‘).show(1000);*/ ???????/*slideDown()向下展开*/ ???????/*$(‘.div1‘).slideDown(1000);*/ ???????/*slideUp()向上卷起*/ ???????/*$(‘.div1‘).slideUp(1000);*/ ???????/*slideToggle()向下向上反复*/ ???????$(‘.div1‘).slideToggle(1000); ???})})</script><style type="text/css">
.div1{ ???width: 300px; ???height: 300px; ???background-color: antiquewhite;}</style></head>
<body>
<input type="button" value="效果" id="btn"><div class="div1"></div></body>
</html>
2.链式调用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层级菜单</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ ???$(‘.level1‘).click(function(){ ???????/*点击a,next()就是ul,stop()修正反复点击，向上向下伸展，父级li,siblings()其他同级li，ul子元素，升起*/ ???????$(this).next().stop().slideToggle().parent().siblings().children(‘ul‘).slideUp(); ???})})</script><style type="text/css">
.menu{ ???width: 100px; ???background-color: aqua; ???list-style: none; ???padding: 0; ???margin: 50px auto 0;}.menu li{ ???border-bottom: 1px solid #fff;}.menu li a{ ???text-decoration: none; ???color: #8820AF;}.menu li ul{ ???background-color: #DDD4D5; ???list-style: none; ???padding: 0; ???text-align: center;}.menu li ul li:hover{ ???background-color: antiquewhite;}</style></head>
<body>
<ul class="menu"> ???<li> ???????<a href="#" class="level1">勇士</a> ???????<ul class="first"> ???????????<li><a href="">杜兰特</a></li> ???????????<li><a href="">库里</a></li> ???????????<li><a href="">汤普森</a></li> ???????</ul> ???</li> ???<li> ???????<a href="#" class="level1">火箭</a> ???????<ul> ???????????<li><a href="">哈登</a></li> ???????????<li><a href="">保罗</a></li> ???????????<li><a href="">饼皇</a></li> ???????</ul> ???</li> ???<li> ???????<a href="#" class="level1">湖人</a> ???????<ul> ???????????<li><a href="">詹姆斯</a></li> ???????????<li><a href="">球哥</a></li> ???????????<li><a href="">莺歌</a></li> ???????</ul> ???</li></ul></body>
</html>
jQuery特性效果与链式调用
原文地址：http://blog.51cto.com/13742773/2339942