Fade the background-color of a span tag with JQuery

jquery jquery-animate fade background-color html
Russ Clark picture Russ Clark · Apr 9, 2009 · Viewed 50.8k times · Source

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");

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

mishac picture mishac · Apr 9, 2009

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

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

Related questions

Slowly change/fade/animate an image changing with JQuery

This is my img, <img src="one.png" id="one" onMouseOver="animateThis(this)"> I want to slowly change this image src to "oneHovered.png" when the user hovers over using jQuery. Which jQuery method is best to do …

Read More
jQuery .scrollTop(); + animation

I set the page to scroll to top when a button is clicked. But first I used an if statement to see if the top of the page was not set to 0. Then if it's not 0 I animate the page …

Read More
jQuery animate backgroundColor

I am trying to animate a change in backgroundColor using jQuery on mouseover. I have checked some example and I seem to have it right, it works with other properties like fontSize, but with backgroundColor I get and "Invalid Property" …

Read More