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

Question

我试图在jQuery中做颜色变化的动画。但失败了。

JS Bin

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

我知道Stack溢出有一个类似的答案，但这是几年前的事了。因此，我再次要求对这个问题提出新的可能的答案。:)

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>

​