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 inside the click handler, but I can't seem to get it working. Can you show me where I went wrong? Thanks Russ.

$("span").fadeOut("slow").css("background-color").val("FFFF99");

Answer 1

You'll want to use this syntax:

$("span").fadeOut("slow").css("background-color", "#FFFF99");

Answer 2

That's better, but now it fades both the background-color of the span tag and the text value of the span tag too. I'm trying to just fade the background-color and leave the text visible. Can that be done?

Answer 3

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

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

Answer 4

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

And here's another helpful section of the 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.

Answer 5

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 6

what about fading the actual body background color? Is there a solution for this?

Answer 7

Try this

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