效果先看
主要函数
show(fast,slow,normal,毫秒数):将元素切换为可见的
hide(fast,slow,normal,毫秒数)：将元素切换为不可见的
toggle(fast,slow,normal,毫秒数):如果元素是隐藏的，切换为可见的，反之，如果元素是可见的。。。
slideDown(fast,slow,normal,毫秒数)：元素下滑显示
fadeIn(fast,slow,normal,毫秒数) :淡入
fadeOut(fast,slow,normal,毫秒数) :淡出
测试代码
<!DOCTYPE html>
<html>
<head>
<!--
show(fast,slow,normal,毫秒数):将元素切换为可见的
hide(fast,slow,normal,毫秒数)：将元素切换为不可见的
toggle(fast,slow,normal,毫秒数):如果元素是隐藏的，切换为可见的，反之，如果元素是可见的。。。
slideDown(fast,slow,normal,毫秒数)：元素下滑显示
fadeIn(fast,slow,normal,毫秒数) :淡入
fadeOut(fast,slow,normal,毫秒数) :淡出
-->
<meta charset="utf-8">
<title>jQuery动画效果</title>
<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function test(){
$("#showdiv").show(2000)
$("#showdiv").hide(1000)
$("#div1").show(1100)
$("#div1").hide(1000)
}
function slideDownTest(){
$("#div1").hide()
$("#div1").slideDown();
}
function fadeInTest(){
$("#div1").hide()
$("#div1").fadeIn(4000);
}
</script>
<style type="text/css">
#showdiv{
height: 18.75rem;
background-color: orange;
display: none;
}
#div1{
height: 18.75rem;
background-color: purple;
display: none;
}
</style>
</head>
<body>
<input type="button" name="" id="" value="show与hide" onclick="test()"/>
<input type="button" name="" id="" value="slideDown()下滑" onclick="slideDownTest()"/>
<input type="button" name="" id="" value="fadeIn()淡入" onclick="fadeInTest()"/>
<hr>
<div id="showdiv" ></div>
<div id="div1" ></div>
</body>
</html>