使用 jquery 颜色插件为 Div 的颜色设置动画答案

【问题标题】：Animate colors of a Div using jquery color plugin使用 jquery 颜色插件为 Div 的颜色设置动画
【发布时间】：2014-12-17 03:15:57
【问题描述】：

我正在尝试使用 Jquery 和 Jquery 颜色插件更改页面上 Div 元素的颜色。你能解释一下我在这里做错了什么吗？我正在尝试将颜色更改为红色、黄色、石灰和蓝色......

 <!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>  
    <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            var div = $("div");         
            div.animate({ height: '300px', opacity: '0.4',color:'red' }, 1000);
            div.animate({ width: '300px', opacity: '0.8',color:'yellow' }, 1200);
            div.animate({ height: '100px', opacity: '0.4',color:'lime' }, 1230);
            div.animate({ width: '100px', opacity: '0.8',color:'blue' }, 1234);
        });
    });
</script> 
</head>

<body>
<button>Start Animation</button>
<div style="background:#123456;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

【问题讨论】：

color 指的是文本颜色。使用backgroundColor改变背景颜色。
非常感谢！我不敢相信我是怎么犯这个错误的。

标签： jquery jquery-plugins

【解决方案1】：

css 属性color 设置文本的颜色，而不是背景颜色。它的 css 属性是 background-color。

然而，jQuery 期望 css 属性没有破折号和lower camel case。因此，在 jQuery 中，您可以将其引用为 backgroundColor:

div.animate({ height: '300px', opacity: '0.4', backgroundColor:'red' }, 1000);

【讨论】：