The animate effect of JQuery backgroundcolor

We know that jquery is almost our most commonly used JavaScript library, but despite the fact that he has a lot of special effects, he still lacks some animation effects. For example, color, background color transformation.

Animate generally supports only size, position, and transparency changes

Today to see Sina Weibo in the microblogging box without content, click the Publish button, the release box will have a background color flashing, create a warning effect, a friendly user experience to imitate.
And then the day was tangled ...

At first I used jquery's Fadein and fadeout, and soon I was able to achieve the results. But I found that Weibo is gradually changing the color of the background, and Fadein and fadeout are achieved by gradually changing alpha. So began to tangle in.
Then, write a snippet of code

var color = function () {};color.fadein = function (a) {if (a>=255) {$ (' #input '). CSS (' backgroundcolor ', ' gba (' +a+ ', ' +a+ ', ' +a+ '); A++;settimeout (Color.fadein (a), 20);} else {setTimeout (Color.fadeout (a), 20);}} Color.fadeout = function (a) {//omitted here}

Simply put, I want to achieve, for example RGB (A, A, a) increment to RGB (255, 255, 255) and then decrement to RGB (A, A, a)
But the effect is much worse, a test color does not change.
So, hit a test code

SetTimeout ($ (' #input '). CSS (' backgroundcolor ', ' Red '), SetTimeout ($ (' #input '). CSS (' backgroundcolor ', ' black ' ), 2000);

Open the browser, is directly black, and did not jump from red to black.
。。。
A plug-in for jquery was later called Jquery.color.js, which overrides the animate effect of backgroundcolor,color,bodercolor and other attribute colors.
So the problem can be solved like this:
$ (' #input '). Animate ({backgroundcolor: ' Red '}, 1000);
This will gradually change from the original background color to the red effect.
It's amazing to start studying the source code of Jquery.color.js.
A warning effect code for color flicker implemented with Jquery.color.js is attached first

$ ('. Publish a '). Click (function () {var content = $ (' textarea '). Val (); if (content== "") {$ (' #input '). Stop (False, true). Animate ({backgroundcolor: ' #FF9966 '}, +). Animate ({backgroundcolor: ' #FFF '}, $). Animate ({backgroundcolor: ' # FF9966 '}, +). Animate ({backgroundcolor: ' #FFF '}, 200);} else {$.post (URL, {input:content},function (data) {});}});

JQuery backgroundcolor animate effects