Color/background-color 在 jQuery 中更改动画

Question

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

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

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

Answer 1

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

jQuery UI

JS Bin

Answer 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%;
}

<div id="circle"></div>

Color/background-color 在 jQuery 中更改动画

Color/background-color change animation in jQuery

javascript

jquery

animation

background-color

原版 Javascript 和 CSS 动画