显示与隐藏
hide([参数])和show([参数]) 直接显示和隐藏效果 参数： 毫秒（比如1500） “show” “normal” “fast” toggle([参数])
滑动
slideDown([参数])向下滑动出现 slideUp([参数])向上滑动隐藏 需要将display为none隐藏 参数为’show’,‘fast’，毫秒数 slideToggle()
淡入淡出
fadein([参数]) 淡入：原本为display为none的元素出现 fadeOut([参数]) 淡出：原本为显示的元素隐藏display为none 参数可为‘slow’，‘fast’,或毫秒数
fadeToggle()
动画控制
停止动画 stop() 结束动画 finish() 延时下一动画 delay(毫秒数)
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
width:400px;
padding: 10px;
border: 2px red dotted;
}
li{
border: 2px solid skyblue;
font-size: 30px;
}
</style>
<script src="./jquery-3.4.1.min.js"></script>
<body>
<h1>节点操作</h1>
<div id="opBox"></div>
<button id="addPic">添加一个图片</button>
<button id="hideBtn">图片隐藏</button>
<button id="showBtn">show显示图片层</button>
<button id="hideshowBtn">先隐藏再显示</button>
<button id="toggleBtn">切换隐藏与显示</button>
<button id="slideupBtn">向上滑动隐藏</button>
<button id="slidedownBtn">向下滑动显示</button>
<button id="slidetoggleBtn">切换滑动显示</button>
<button id="fadeinBtn">淡出显示</button>
<button id="fadeoutBtn">淡出隐藏</button>
<button id="fadetoggleBtn">淡入淡出切换</button>
<h1>动画控制</h1>
<button id="stopBtn">stop动画</button>
<button id="finishBtn">finish动画</button>
<button id="delayBtn">delay动画</button>
</body>
</html>
<script>
$(document).ready(function(){
$("#addPic").click(function(){
var $img = $("<img>").attr("src", "./img/right.gif").css("display", "none");
$("#opBox").append($img);
$img.show(2000);
});
$("#hideBtn").click(function(){
$("#opBox").hide(3000);//不加参数则直接隐藏节点，加参数的话可以设置隐藏的时间
});
$("#showBtn").click(function(){
$("#opBox").show(3000);//不加参数则直接隐藏节点，加参数的话可以设置隐藏的时间
});
$("#hideshowBtn").click(function(){
$("#opBox").hide(1000).show(3000);
});
$("#toggleBtn").click(function(){
$("#opBox").toggle(1000,function(){
$("body").append($("<p>结束操作</p>"));
});
});
$("#slideupBtn").click(function(){
$("#opBox").slideUp(1000);
});
$("#slidedownBtn").click(function(){
$("#opBox").slideDown(1000);
});
$("#slidetoggleBtn").click(function () {
$("#opBox").slideToggle(1000);
});
$("#fadeinBtn").click(function () {
$("#opBox").fadeIn("slow");
});
$("#fadeoutBtn").click(function () {
$("#opBox").fadeOut("slow");
});
$("#fadetoggleBtn").click(function () {
$("#opBox").fadeToggle("slow");
});
$("#stopBtn").click(function () {
$("#opBox").stop();//停止动画
});
$("#finishBtn").click(function () {
$("#opBox").finish();//结束动画
});
$("#delayBtn").click(function () {
$("#opBox").slideUp(1000).delay(4000).slideDown(1000);//延时动画
});
});
</script>
