The code is as follows, clicking the button has no effect
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<style>
#cbox{
background-color:green;
color:red;
border:5;
width:300px;
height:200px;
positon:relative;
}
</style>
<title>Document</title></head>
<body>
<h1>Jquery 学习</h1>
<button id='btn'>点击</button>
<p id='cbox'>变化的Box</p>
<script>
jQuery(document).ready(function($){
$('#btn').click(function(event){
$('#cbox').animate({
left:300,
color:gray,
width:'400px'
});
});
});
</script></body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
animate will not change the color, so this gray is meaningless. In addition, even if you want to write color, gray should be enclosed in quotation marks, otherwise it will become an undefined variable.
color:'gray'
Remove $ in the parameter list
There should be no $ in function.
animate does not have a color tag, but has an opacity tag for transparency transformation.
Also, the value corresponding to the label should have single quotes''.
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://cdn.bootcss.com/jquer...
<style>
</style>
<title>Document</title>
</head><body>
<h1>Jquery 学习</h1>
<button id='btn'>点击</button>
<p id='cbox'>变化的Box</p>
<script>
</script>
<script>
/**!
@preserve Color animation 1.6.0
http://www.bitstorm.org/jquer...
Copyright 2011, 2013 Edwin Martin
Released under the MIT and GPL licenses.
*/
(function($) {
/**
Check whether the browser supports RGBA color mode.
*
Author Mehdi Kabab http://pioupioum.fr
@return {boolean} True if the browser support RGBA. False otherwise.
*/
function isRGBACapable() {
}
$.extend(true, $, {
});
var properties = ['color', 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'outlineColor'];
$.each(properties, function(i, property) {
});
// borderColor doesn't fit in standard fx.step above.
$.Tween.propHooks.borderColor = {
}
// Calculate an in-between color. Returns "#aabbcc"-like string.
function calculateColor(begin, end, pos) {
}
// Parse an CSS-syntax color. Outputs an array [r, g, b]
function parseColor(color) {
}
// Some named colors to work with, added by Bradley Ayers
// From Interface by Stefan Petre
// http://interface.eyecon.ro/
var colors = {
};
})(jQuery);
</script>
</body></html>
代码直接运行 即可改变颜色 我是雷锋求采纳