jQuery有三种方式显示与隐藏元素
1、默认显示和隐藏的方式
1、show([speed],[easing],[fn])：显示
2、hide([speed],[easing],[fn])：隐藏
3、toggle([speed],[easing],[fn])：切换
2、滑动显示和隐藏
1、slideDown([speed],[easing],[fn])：向下滑动显示
2、slideUp([speed,[easing],[fn]])：向上滑动隐藏
3、slideToggle([speed],[easing],[fn])：切换
3、淡入淡出显示和隐藏
1、fadeIn([speed,[easing],[fn]])：显示
2、fadeOut([speed,[easing],[fn]])：隐藏
3、fadeToggle([speed,[easing],[fn]])：切换
[speed],[easing],[fn]
speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn：在动画完成时执行的函数，每个元素执行一次
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
<script>
function hideFn() {
$("#showDiv").fadeOut(2000,"swing",function () {
alert("我完全隐藏了")
})
}
function showFn() {
$("#showDiv").show("slow","swing",function () {
alert("我显示出来了")
})
}
function toggleFn() {
$("#showDiv").toggle()
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>
浙公网安备 33010602011771号