我正在尝试使用 JQuery 淡化 span 标签的背景颜色，以强调何时发生更改。我在想代码在点击处理程序中会像下面这样，但我似乎无法让它工作。你能告诉我我哪里出错了吗？ 谢谢拉斯。
$("span").fadeOut("slow").css("background-color").val("FFFF99");
这样更好，但现在它会同时淡化 span 标签的背景颜色和 span 标签的文本值。我试图只是淡化背景颜色并让文本可见。可以吗？
【问题讨论】：
标签： jquery jquery-animate fade background-color html
可以通过color animation plugin 完成。然后你会做类似的事情
$('span').animate({'backgroundColor' : '#ffff99'});
【讨论】：
Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.api.jquery.com/animate
哦，我没有意识到你想褪色！好的，所以你需要查看 jQuery 颜色插件：
http://plugins.jquery.com/project/color
https://github.com/jquery/jquery-color/
这里是 jQuery 文档网站的另一个有用部分：
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations
我实际上从未这样做过，所以我不会尝试给你代码，但我想颜色插件会给你你需要的功能。
【讨论】：
如果使用纯 jQ 淡出背景在没有插件的情况下无法正常工作，那么使用 CSS3 可以使用一种聪明的（尽管没有逐步增强）方法。
此函数将通过 CSS 将“transition”属性应用于给定元素 接下来，为元素赋予 CSS 淡入的背景颜色。
如果您希望它像波浪一样（“看这里！”），在延迟半秒后，将一个函数排队以将元素变回白色。
本质上，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.
}
【讨论】：
这可以通过 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：
<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>
那么，你需要做的就是：
$("#fadeout-div").fadeOut(1100);
简单易上手！看看这个：http://jsfiddle.net/matthewbj/jcSYp/
【讨论】：
试试这个
$(this).animate({backgroundColor:"green"}, 100);
$(this).animate({backgroundColor:"white" }, 1000);
【讨论】：
可能会迟到回答，但可以直接解决您的问题。
$('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});
简单。不需要 jqueryUI 插件、第三方工具等等。
【讨论】：
我不想使用插件 所以为了淡入淡出背景，我将这个包含在 div 类中，以使其背景褪色
.div-to-fade {
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
按钮点击中的jquery
$('.div-to-fade').css('background', 'rgb(70, 70, 70)');
setTimeout(function(){$('.div-to-fade').css('background', '')}, 1000);
这会将背景着色为浅灰色，然后淡出原色 我希望这会有所帮助
【讨论】：
这就是你在 span 标签上调用 fadeOut 的原因。要获得背景淡入淡出动画，您应该使用：
$('span').animate({'backgroundColor' : '#ffff99'});
正如 mishac 所指出的那样。另一种方式可能是这样的：
$("span").fadeTo(0.5,"slow", function () {
$(this).css("background-color", "#FFFF99");
$(this).fadeIn("slow");
});
上面的代码会淡出到整个 span 标签的 50%，然后改变背景和淡入。这不是您想要的，而是创建一个不依赖于其他 jquery 插件的欺骗动画；）
【讨论】：
最新的 jQuery UI 业务允许您对大多数对象进行背景颜色转换。 见这里：http://jqueryui.com/demos/animate/
至于那个询问在翻转时使背景透明以显示图像的人，像人们用来切换导航图像的普通 jQuery 图像翻转那样构建它不是更简单吗？
【讨论】：
你会想要使用这个语法：
$("span").fadeOut("slow").css("background-color", "#FFFF99");
【讨论】：
这就是我通过悬停为我的列表修复它的方法：
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'); });
});
【讨论】：
另一个解决方案没有 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);
}
【讨论】：