jQuery中的颜色/背景颜色变化动画答案

【问题标题】：Color/background-color change animation in jQueryjQuery中的颜色/背景颜色变化动画
【发布时间】：2015-08-11 05:11:36
【问题描述】：

我正在尝试在 jQuery 中制作颜色变化的动画。但是失败了。
JS Bin

$("#circle").click(function(){
    $(this).animate({
        backgroundColor: "#eee",
        width:"300px",
        height: "300px",
        borderRadius: "150px",
        }, 2000);
});

我知道 Stack Overflow 上有一个类似的答案，但那是几年前的事了。所以我再次要求这个问题的潜在更新答案。 :)

【问题讨论】：

你在使用 jQueryUI 和 jQuery 吗？ jQuery 本身不支持彩色动画
（我是 Javascript 新手。）那么 jQuery UI 和 jQuery 一样吗？
不——它是 jQuery 的扩展。您需要包括 jQuery，然后是 jQuery UI 和/或任何其他 jQuery 扩展。
所以我需要做的就是为 jQuery UI 添加另一行
没错！请参阅下面我的答案中的 JS Bin 链接 - 这就是我所做的。

标签： javascript jquery animation background-color

【解决方案1】：

您需要使用 jQuery UI 以及 jQuery，因为单独的 jQuery 不支持彩色动画。

jQuery UI

JS Bin

【讨论】：

那么，还有什么像 jQuery UI 这样的扩展吗？我想知道更多的例子。 :D
如果您不想加载 jqueryUI，您也可以尝试 jquery 的颜色插件，如 jquery.animate() 文档中所建议的那样。 github.com/jquery/jquery-color
感谢分享插件！我从来没有听说过 Javascript 的插件。我只是想在将来开始使用它之前了解更多术语。 :)

【解决方案2】：

原版 Javascript 和 CSS 动画

您可以使用 css 动画来做到这一点。但是，它不会在不支持 CSS 动画的旧浏览器上进行动画处理，这可能是件好事。

根据我的经验，使用足够老的浏览器不支持动画的计算机通常速度很慢，以至于动画会损害用户体验，所以我会推荐这种方法。

同样，CSS 动画比 jQuery 动画渲染更流畅，开销更少。

不需要外部库，甚至不需要 jQuery

(function () {
    "use strict";
    document.getElementById("circle").onclick = function () {
        if (this.className.indexOf('clicked') < 0) this.className += ' clicked';
        else this.className = this.className.replace(/ clicked/g, '');
    };
})();

#circle {
    width: 100px;
    height: 100px;
    background: red;
    transition: all .4s linear;
}
#circle.clicked {
    background: #eee;
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

&lt;div id="circle"&gt;&lt;/div&gt;

【讨论】：