Fade the background-color of a span tag with JQuery

It can be done with the color animation plugin. You'd then do something like

$('span').animate({'backgroundColor' : '#ffff99'});

OH, I didn't realize you wanted to fade the color! OK, so you need to check out the jQuery color plugin:

http://plugins.jquery.com/project/color

https://github.com/jquery/jquery-color/

And here's another helpful section of the jQuery docs site:

http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

I've never actually done this so I won't try to give you code, but I imagine the color plugin will give you the functionality you need.

If using pure jQ to fade out a background doesn't work without a plugin, there's a clever (although not progressively enhanced) way to do this with CSS3.

This function will apply the "transition" attribute to a given element via CSSNext, the element is given a background color which CSS fades into.

In case you want this to be like a wave ("look here!"), after a delay of half a second, a function is queued to turn the element back to white.

Essentially jQ just blinks the element on to one color, then back to white. CSS3 takes care of the fading.

//reusable function to make fading colored hintsfunction fadeHint(divId,color) {    switch(color) {        case "green":        color = "#17A255";        break;        case "blue":        color = "#1DA4ED";        break;        default: //if "grey" or some misspelled name (error safe).        color = "#ACACAC";        break;    }    //(This example comes from a project which used three main site colors:     //Green, Blue, and Grey)    $(divId).css("-webkit-transition","all 0.6s ease")    .css("backgroundColor","white")    .css("-moz-transition","all 0.6s ease")    .css("-o-transition","all 0.6s ease")    .css("-ms-transition","all 0.6s ease")    /* Avoiding having to use a jQ plugin. */    .css("backgroundColor",color).delay(200).queue(function() {        $(this).css("backgroundColor","white");         $(this).dequeue(); //Prevents box from holding color with no fadeOut on second click.    });     //three distinct colors of green, grey, and blue will be set here.}