<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1 {
/* display: none; */
background-color: #f00;
}
</style>
</head>
<body>
<p><button type="button">淡入淡出</button></p>
<h1>Hello Animation</h1>
<h1>Hello Animation</h1>
<h1>Hello Animation</h1>
<script src="./jquery.js"></script>
<script>
$('button[type="button"]').click(function () {
// 淡入效果
// $('h1').fadeIn(10 * 1000, 'linear', function() {
// console.log('动画执行完毕')
// })
// 淡出效果
// $('h1').fadeOut(10 * 1000, 'linear', function() {
// console.log('动画执行完毕')
// })
// 淡入淡出切换
// $('h1').fadeToggle(10 * 1000, 'linear', function() {
// console.log('动画执行完毕')
// })
// 不透明度变到原来的一半
$('h1').fadeTo(10 * 1000, 0.5, 'linear', function() {
console.log('动画执行完毕')
})
})
</script>
</body>
</html>
来源：CSDN
作者：上头upup
链接：https://blog.csdn.net/qq_45802159/article/details/103244959