特殊效果方法
代码语言：javascript复制fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素fadeIn() 淡入 / fadeOut() 淡出 / fadeToggle() 切换淡入淡出
编写一个按钮和div来演示一下效果。
一言不合就写好示例页面的html和样式，如下：
那么下一步写click监听点击按钮，然后触发div使用fadeOut()方法，使得已存在的div消失，如下：
下面再写另一个按钮，用来触发fadeIn()方法，如下：
但是如果要写两个方法来切换的确挺麻烦，那么fadeToggle()这个方法就要隆重登场了。只需要写这个方法就可以完成切换，如下：
hide() 隐藏元素 / show() 显示元素 / toggle() 切换元素的可见状态
上面写了淡入淡出的效果，下面来写一下隐藏和显示元素的效果。
toggle() 切换元素的可见状态
好了，上面这个就是显示和隐藏的切换效果。
show() 显示元素
代码语言：javascript复制hide() 隐藏元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
slideDown() 向下展开 / slideUp() 向上卷起 / slideToggle() 依次展开或卷起某个元素
代码语言：javascript复制slideDown() 向下展开 / slideUp() 向上卷起
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("div").stop().slideDown();
});
$(".btn2").click(function(){
$("div").stop().slideUp();
});
});
</script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: gold;
}
</style>
</head>
<body>
<button class="btn1">SlideDown</button>
<button class="btn2">SlideUp</button>
<div>This is a Div</div>
</body>
</html>注意：这里还使用了stop()方法，主要是用于停止之前触发的动画效果的。
slideToggle() 依次展开或卷起某个元素
