<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div" style="display: none;width: 200px;height: 200px;background-color: #dca82d"></div>
<input id="fadein" type="button" value="fadein">
<input id="fadeout" type="button" value="fadeout">
<input id="fadeToggle" type="button" value="fadeToggle">
<input id="fadeTo" type="button" value="fadeTo">
<script src="jquery-3.5.1.js"></script>
<script>
$("#fadein").click(function () {
$("#div").fadeIn(1000,function () {
alert("这是回调函数（事件结束后，执行此方法）") // 回调函数（事件结束后，执行此方法）
})
});
$("#fadeout").click(function () {
$("#div").fadeOut(1000)
});
$("#fadeToggle").click(function () {
$("#div").fadeToggle(1000)
});
$("#fadeTo").click(function () {
$("#div").fadeTo(1000,0.3) // 调整透明度 $("#div").fadeTo(1000,0.3)
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/zxy01/p/13660737.html