问题
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?
回答1:
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.
回答2:
It can be done with the color animation plugin. You'd then do something like
$('span').animate({'backgroundColor' : '#ffff99'});
回答3:
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.
}
回答4:
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/
回答5:
Try this
$(this).animate({backgroundColor:"green"}, 100);
$(this).animate({backgroundColor:"white" }, 1000);
回答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.
回答7:
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
回答8:
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 ;)
回答9:
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?
回答10:
You'll want to use this syntax:
$("span").fadeOut("slow").css("background-color", "#FFFF99");
回答11:
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'); });
});
回答12:
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/
来源：https://stackoverflow.com/questions/734068/fade-the-background-color-of-a-span-tag-with-jquery