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

that's why you call fadeOut on the span tag. to get background fade animation you should use:

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

as pointed by mishac. another way could be something like this:

$("span").fadeTo(0.5,"slow", function () {
  $(this).css("background-color", "#FFFF99");
  $(this).fadeIn("slow");
});

the above code will fadeout to 50% the entire span tag, then changes background and fadeIn. it isn't what you were looking for, but creates a decet animation without depending from other jquery plugins ;)

Answer 2

This is how I fixed it for my list with a hover:

CSS:

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery:

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

Answer 3

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

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

Answer 4

Try this

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);

Answer 5

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

Answer 6

Another solution without jQuery UI https://stackoverflow.com/a/22590958/781695

//Color row background in HSL space (easier to manipulate fading)
$('span').css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('span').css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

Demo : http://jsfiddle.net/5NB3s/3/