使用 JQuery 淡化 span 标签的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/734068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fade the background-color of a span tag with JQuery
提问by Russ Clark
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.
我正在尝试使用 JQuery 淡化 span 标记的背景颜色，以强调何时发生更改。我在想代码在点击处理程序中会像下面这样，但我似乎无法让它工作。你能告诉我我哪里出错了吗？谢谢拉斯。
$("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?
那更好，但现在它同时淡化了 span 标签的背景颜色和 span 标签的文本值。我正在尝试淡化背景颜色并使文本可见。可以做到吗？
采纳答案by Brandon Montgomery
OH, I didn't realize you wanted to fade the color! OK, so you need to check out the jQuery color plugin:
哦，我没想到你想褪色！好的，所以您需要查看 jQuery 颜色插件：
http://plugins.jquery.com/project/color
http://plugins.jquery.com/project/color
https://github.com/jquery/jquery-color/
https://github.com/jquery/jquery-color/
And here's another helpful section of the jQuery docs site:
这是 jQuery 文档站点的另一个有用部分：
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations
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.
我从来没有真正这样做过，所以我不会尝试给你代码，但我想颜色插件会给你你需要的功能。
回答by mishac
It can be done with the color animation plugin. You'd then do something like
它可以通过颜色动画插件来完成。然后你会做类似的事情
$('span').animate({'backgroundColor' : '#ffff99'});
回答by Adam Grant
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.
如果使用纯 jQ 淡出背景在没有插件的情况下不起作用，那么使用 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.
此函数将通过 CSS 将“transition”属性应用于给定元素接下来，为该元素提供 CSS 淡入的背景颜色。
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.
本质上，jQ 只是将元素闪烁到一种颜色，然后再回到白色。CSS3 负责处理褪色。
//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.
}
回答by honyovk
This can be done with jQuery (or any lib) & a simple CSS hack:
这可以通过 jQuery（或任何库）和一个简单的 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:
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/
十分简单！看看这个：http: //jsfiddle.net/matthewbj/jcSYp/
回答by Kev
Try this
尝试这个
$(this).animate({backgroundColor:"green"}, 100);
$(this).animate({backgroundColor:"white" }, 1000);
回答by Aakash Sahai
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.
简单的。不需要 jqueryUI 插件、第 3 方工具等等。
回答by Steve Whitby
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 类中，使其背景淡化
.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
按钮单击中的 jquery
$('.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
这将使背景浅灰色，然后淡入原色我希望这有助于
回答by MeanMatt
The newest jQuery UI business allows you to do background-color transforms on most objects. See here : http://jqueryui.com/demos/animate/
最新的 jQuery UI 业务允许您对大多数对象进行背景颜色转换。在这里看到：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?
至于那个问在滚动时使背景透明以显示图像的人，像人们用来切换导航图像的普通 jQuery 图像滚动一样构建它不是更简单吗？
回答by Andrea Pavoni
that's why you call fadeOut on the span tag. to get background fade animation you should use:
这就是为什么你在 span 标签上调用fadeOut。要获得背景淡入淡出动画，您应该使用：
$('span').animate({'backgroundColor' : '#ffff99'});
as pointed by mishac. another way could be something like this:
正如 mishac 所指出的那样。另一种方式可能是这样的：
$("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 ;)
上面的代码将淡出到整个 span 标签的 50%，然后更改背景和淡入淡出。这不是您要找的东西，而是在不依赖其他 jquery 插件的情况下创建了一个欺骗动画；)
回答by Brandon Montgomery
You'll want to use this syntax:
你会想要使用这个语法：
$("span").fadeOut("slow").css("background-color", "#FFFF99");
