如何使用 jQuery 淡入文本内容？
关键是要引起用户对消息的注意。
问问题
163994 次
9 回答
93
如果您想专门为元素的背景颜色设置动画，我相信您需要包含 jQueryUI 框架。然后你可以这样做：
$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');
jQueryUI 有一些可能对你有用的内置效果。
于 2009-06-09T02:29:12.110 回答
92
于 2009-06-09T04:00:35.450 回答
28
我知道问题是如何用 Jquery 来做，但是你可以用简单的 css 和一点 jquery 来实现同样的效果......
例如，您有一个带有“box”类的 div，添加以下 css
.box {
background-color: black;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
然后使用 AddClass 函数添加另一个具有不同背景颜色的类，例如“框突出显示”或类似以下 CSS 的内容：
.box.highlighted {
background-color: white;
}
我是初学者，也许这种方法有一些缺点，但也许对某人有帮助
这是一个代码笔： https ://codepen.io/anon/pen/baaLYB
于 2014-10-09T11:59:35.263 回答
14
通常您可以使用.animate()方法来操作任意 CSS 属性，但对于背景颜色，您需要使用颜色插件。包含此插件后，您可以使用其他人指示的内容$('div').animate({backgroundColor: '#f00'})来更改颜色。
正如其他人所写的，其中一些也可以使用 jQuery UI 库来完成。
于 2009-06-09T05:18:09.027 回答
10
仅使用 jQuery（无 UI 库/插件）。连jQuery都可以轻松淘汰
//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).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(){
$('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)');
}, dd);
})(i,d);
}
演示：http: //jsfiddle.net/5NB3s/2/
- SetTimeout 将亮度从 50% 增加到 100%，基本上使背景变白（您可以根据颜色选择任何值）。
- SetTimeout 被包装在一个匿名函数中，以便它在循环中正常工作（原因）
于 2014-04-24T13:51:12.497 回答
8
根据您的浏览器支持，您可以使用 css 动画。浏览器支持 IE10 及更高版本的 CSS 动画。这很好，所以如果它只是一个小的复活节彩蛋，你不必添加 jquery UI 依赖项。如果它是您网站的组成部分（也就是 IE9 及以下版本所需要的），请使用 jquery UI 解决方案。
.your-animation {
background-color: #fff !important;
-webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
from { background-color: #5EB4FE;}
to {background-color: #fff;}
}
接下来创建一个 jQuery click 事件，将your-animation类添加到您想要动画的元素，触发背景从一种颜色淡入另一种颜色：
$(".some-button").click(function(e){
$(".place-to-add-class").addClass("your-animation");
});
于 2014-06-09T17:18:35.600 回答
4
我写了一个超级简单的 jQuery 插件来完成类似的事情。我想要一些非常轻量级的东西（缩小了 732 字节），所以包含一个大插件或 UI 对我来说是不可能的。它的边缘仍然有点粗糙，因此欢迎提供反馈。
您可以在此处查看插件：https ://gist.github.com/4569265 。
使用该插件，通过更改背景颜色然后添加一个setTimeout来触发插件以淡化回原始背景颜色来创建高亮效果将是一件简单的事情。
于 2013-01-18T22:50:14.810 回答
3
仅使用简单的 javascript 在 2 种颜色之间渐变：
function Blend(a, b, alpha) {
var aa = [
parseInt('0x' + a.substring(1, 3)),
parseInt('0x' + a.substring(3, 5)),
parseInt('0x' + a.substring(5, 7))
];
var bb = [
parseInt('0x' + b.substring(1, 3)),
parseInt('0x' + b.substring(3, 5)),
parseInt('0x' + b.substring(5, 7))
];
r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);
return '#'
+ r.substring(r.length - 2)
+ g.substring(g.length - 2)
+ b.substring(b.length - 2);
}
function fadeText(cl1, cl2, elm){
var t = [];
var steps = 100;
var delay = 3000;
for (var i = 0; i < steps; i++) {
(function(j) {
t[j] = setTimeout(function() {
var a = j/steps;
var color = Blend(cl1,cl2,a);
elm.style.color = color;
}, j*delay/steps);
})(i);
}
return t;
}
var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T = fadeText(cl1,cl2,elm);
于 2012-07-26T21:21:07.210 回答
0
javascript 在没有 jQuery 或其他库的情况下淡入白色：
<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
var obj=document.getElementById("x");
var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
if(unBlue>245) unBlue=255;
if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
else clearInterval(gEvent)
}
</script>
在印刷中，黄色减去蓝色，因此从小于 255 的第 3 个 rgb 元素（蓝色）开始以黄色突出显示。然后10+在设置var unBlue值时增加负蓝色，直到达到 255。
于 2016-05-11T14:16:22.247 回答