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

Question

我试图在jQuery中做变色动画。但它失败了。
JS Bin

"INSERT INTO `users`(`email`,`password`)
                    `   VALUES ('".mysqli_real_escape_string($con, $_POST['email'])."', md5(md5($_POST['email']).$_POST['password']).')";

我知道Stack Overflow上有一个类似的答案，但就在几年前。所以我再次询问这个问题的潜在新答案。 ：）

Answer 1

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

jQuery UI

JS Bin

Answer 2

Vanilla Javascript和CSS动画

您可以使用css动画执行此操作。但是，它不会在不支持CSS动画的旧浏览器上动画，这可能是一件好事。

根据我的经验，使用足够不支持动画的浏览器的计算机通常很慢，动画会对用户体验造成损害，所以我建议使用这种方法。

同样，CSS动画渲染更平滑，开销也比jQuery动画更少。

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

＆＃13;

＆＃13;

(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, '');
    };
})();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;