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
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.
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).
The jQuery UI animate function will do it.
See here for jsFiddle.
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();
});