11

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
Anderson Green
  • 30,230
  • 67
  • 195
  • 328

4 Answers4

15

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.

James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • Have you included jQuery UI? Make sure you include it after the core jQuery library. Update your question with some code, or make a jsfiddle demonstrating the problem. – James Allardice Nov 30 '11 at 09:26
  • @JamesAllardice The animation happens so fast that it's difficult to even notice it. Is it possible to slow down the fading animation so that it can be seen more clearly? – Anderson Green May 10 '13 at 03:21
  • @AndersonGreen - The 2nd argument to `.animate()` is the duration of the effect, in milliseconds. – James Allardice May 10 '13 at 06:42
13

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).

Krii
  • 907
  • 9
  • 23
  • 2
    Save yourself an hour and use this! – KryptoniteDove Jun 14 '16 at 20:46
  • 4
    Even shorter: $(selector).css("transition", "color .3s").css("color", "blue"); – Mirko Oct 18 '17 at 09:07
  • This works nicely highlighting fields using background color. However - currently a bit garish! So.... QUESTION>>> Is there a way to get it to transition to a color and then transition back? I am highlighting a field that automatically updates when you change another field so I would like it to either slowly become yellow and fade back to white OR if the white field would become yellow with the update and then fade back to white IYSWIM! Either would be fine. Currently the yellow alrets u to tjhe change but just sits there blinding you! – BeNice May 31 '20 at 20:19
4

The jQuery UI animate function will do it.

See here for jsFiddle.

Rich O'Kelly
  • 41,274
  • 9
  • 83
  • 114
0

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();
});
fidev
  • 1,222
  • 2
  • 21
  • 51