Fade the background-color of a span tag with JQuery

Question

I\'m trying to fade the background-color of a span tag using JQuery to emphasize when a change has occured. I was thinking the code would be someting like the following ins

Answer 1

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 CSS Next, 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 hints
function 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.
}