【问题标题】:How to animate an element's color from one color to another?如何将元素的颜色从一种颜色设置为另一种颜色?
【发布时间】:2016-05-07 00:58:42
【问题描述】:

好的,所以我正在尝试制作自己的网站,我需要通过 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

【问题讨论】:

  • 我没有看到您为此编写的任何代码。
  • 已编辑,意识到我不够彻底。
  • Cau include html at Question?
  • 您是否尝试过切换 css 类来改变颜色?

标签: javascript jquery html css


【解决方案1】:

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

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

【讨论】:

  • 谢谢!非常感谢,我想我不应该期望所有动画都使用 100% CSS,至少对于 UI。
  • +Unity_Paradox 动画可以使用 99% 的 CSS。事实上,您甚至不需要使用 JQuery。但是,您的问题指定了 JQuery...
最近更新 更多