jQuery - How to fade in/out from one color to another? (possible 3rd party plugin fo jQuery?)

问题

I'm looking for a jQuery script or a 3rd party plugin for jQuery, which can create a fade in/out effect based on "from color" and "to color". Example how I see it:

$( selector ).fadeColor({
    from: "#900", // maroon-red color
    to: "#f00",   // blood-red color
}, 3000); // last argument is the time interval, in milliseconds in this particular case it's based for 3 seconds

回答1:

jQuery UI extends jQuery's animate method to include colour animation. You can then do something like:

$("#someId").animate({backgroundColor: "#ff0000" });

Here's a working example.

回答2:

You don't need another plugin. Example:

jQuery

$(selector).css("color", "blue");

CSS

selector {
  transition: color .3s;
}

This will work just fine (and without slowing down the website).

回答3:

The jQuery UI animate function will do it.

See here for jsFiddle.

回答4:

Here's my 2 cents worth - a jsFiddle of a continuously pulsating button, triggered when the document loads.

Demo here

function fadeDivIn(){
    $("#div").animate({backgroundColor: "#ed3" }, 4000, function(){fadeDivOut();});
}

function fadeDivOut(){
    $("#div").animate({backgroundColor: "#3de" }, 4000, function(){fadeDivIn();});
}

$(document).ready(function(){
    fadeDivIn();
});

来源：https://stackoverflow.com/questions/8323474/jquery-how-to-fade-in-out-from-one-color-to-another-possible-3rd-party-plugi