<!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;
border: 5px solid #ff0;
}
</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 () {
// 使用 animate() 方法自定义动画效果
$('h1').animate({
borderRadius: '50%',
width: '200px'
}, 10 * 1000, 'linear', function() {
console.log('动画执行完毕')
})
// 注意：该方法不能变换以下 CSS 属性：
// color
// backgroundColor
// borderTopColor
// borderRightColor
// borderBottomColor
// borderLeftColor
// borderColor
// outlineColor
})
</script>
</body>
</html>
来源：CSDN
作者：上头upup
链接：https://blog.csdn.net/qq_45802159/article/details/103244976