<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 23:08-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn"/> <br/> <br/>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script src="plugin/jquery.color.js"></script>
<script>
$(function () {
/**
* 原始需求: 点击按钮,让div做动画, left改变到800 ,
* 需求添加: 改变背景色
*
* animate动画不会改变背景色, 如果非要改,就要使用插件.
*
* 什么是 插件: 插件就是用来 扩展 功能的
*
*/
$('#btn').click(function () {
$('div').animate({
left: 800,
width: 100,
height: 100,
backgroundColor: 'green'
}, 2000, 'linear');
});
});
</script>
</body>
</html>
