javascript - 如何将元素的颜色从一种颜色动画化为另一种颜色？

Question

好的，所以我正在尝试制作自己的网站，我需要通过 jQuery 动画使段落淡入淡出。为此，我得到了 jQuery UI，我正在尝试为测试元素的颜色设置动画，但它似乎不起作用。 div 的初始颜色是半透明的浅灰色(具体为 rgba(191, 191, 191, 0.25))，我试图将其设置为完全不透明的黑色 (#000000)。我几乎可以肯定我的语法是正确的，但我不确定我是否以正确的顺序在文档的标题中包含了所有内容。我可以在这里得到一些帮助吗？以下是包含的脚本和样式表的代码:

<link rel="stylesheet" type="text/css" href="mainpagestyle.css">

<script src="scripts/jquery-2.2.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
<script src="scripts/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="scripts/jquery-ui-1.11.4.custom/jquery-ui.js"></script>

<script src="scripts/mainscript.js"></script>

这是“mainscript.js”的代码，以防它与脚本语法有关:

$(".click-leftmenu").mouseup(function() {
    if ($(this).attr("out") == 0) {
        $(this).animate({width: "4em", height: "4em"}, 100);
        $(this).prev().animate({height: "4em"}, 100);
        $(".click-leftmenu[out=1]").prev().animate({width: "0%", height: "0%"});
        $(".click-leftmenu").attr("out", 0);
        $(this).prev().animate({width: "50%"}, 500);
        $(this).prev().animate({height: "40em"});
        $(this).prev().animate({color: "#000000"});
        $(this).attr("out", 1);
    }
});

完整代码可以在这里找到:

HTML

jQuery

Answer 1

使用它来设置背景颜色的动画。我不确定其他元素的用途，因为我们没有任何 HTML，所以我排除了其余元素。

$(document).on("click", ".click-leftmenu", function() {
  $(this).animate({
    backgroundColor: "#000000"
  }, 1500);
});