一. 显示隐藏动画
我们想通过页面中的一个按钮来显示和隐藏列表，可以通过toggle方法来显示隐藏元素（第一次点击隐藏，再次点击显示），通过fadeToggle和slideToggle来添加显示隐藏动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
// $("ul").show();显示元素
// $("ul").hide();隐藏元素
// $("ul").toggle();
// $("ul").fadeToggle(); //有隐藏动画：渐变隐藏
$("ul").slideToggle(); //有隐藏动画：从下到上隐藏
});
});
</script>
</head>
<body>
<button id="btn">按钮</button>
<ul>
<li>列表项11</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
<li>列表项9</li>
<li>列表项10</li>
</ul>
</body>
</html>
slideToggle还可以通过参数来控制速度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width:200px;
height: 200px;
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function animate() {
// $("div").slideToggle(1000,animate()); //错误的写法
$("div").slideToggle(1000,animate); //如果和上面一样加了()，则是调用animate方法，而不加()是把这个方法作为参数传入
}
$(function () {
$("button").click(function () {
animate();
});
});
</script>
</head>
<body>
<button>按钮</button>
<div></div>
</body>
</html>
请登录之后再进行评论