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

This can be done with jQuery (or any lib) & a simple CSS hack:

#wrapping-div {
 position:relative;
 z-index:1;
}
#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

HTML:

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>

Then, all you need to do is:

$("#fadeout-div").fadeOut(1100);

Easy Peasy! See this in action: http://jsfiddle.net/matthewbj/jcSYp/

Answer 2

I didnt want to use a plugin So to fade a background in and out i included this for the div class thats to have its background faded

.div-to-fade {
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s
}

the jquery which is in a button click

$('.div-to-fade').css('background', 'rgb(70, 70, 70)');
setTimeout(function(){$('.div-to-fade').css('background', '')}, 1000);

This will color the background light grey and then fade back to the orig color I hope this contributes

Answer 3

The newest jQuery UI business allows you to do background-color transforms on most objects. See here : http://jqueryui.com/demos/animate/

As for the guy asking about making a background transparent on roll-over to reveal an image would it not be simpler to build it like a normal jQuery image roll-over like the ones people use to switch nav images?

Answer 4

You'll want to use this syntax:

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

Answer 5

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.

Answer 6

May be late to answer, but a straight solution to your answer.

 $('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});

Simple. No need of jqueryUI plugin, 3rd party tools and all.