如何使用 jquery 淡入/淡出背景颜色?
-
13-09-2019 - |
题
如何使用 jQuery 淡入文本内容?
重点是吸引用户对消息的注意。
解决方案
其他提示
如果您要明确动画元素的背景颜色,我相信你需要包括jQueryUI的框架。然后,你可以这样做:
$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');
jQueryUI的有一些内置效果可能对你有用的。
我知道,问题是如何用jQuery做到这一点,但你可以实现与简单的CSS和一点点的jQuery相同的影响......
例如,你有“盒子”类中,添加下面的CSS
一个div.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;
}
我是初学者,也许有这种方法的一些缺点,但也许这将是为别人有用
这里的一个codepen: https://codepen.io/anon/pen/baaLYB
一般可以使用 .animate()方法来操纵任意CSS属性,但对于背景颜色,你需要使用href="http://plugins.jquery.com/color/" rel="nofollow noreferrer">颜色插件的$('div').animate({backgroundColor: '#f00'})改变颜色。
正如其他人写的,一些这可以使用jQuery UI库以及进行。
仅使用 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 被包装在一个匿名函数中,以便它在循环中正常工作( 原因 )
根据浏览器的支持,您可以使用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点击事件,其将所述your-animation
类到要动画元件,触发背景衰落从一种颜色到另一种:
$(".some-button").click(function(e){
$(".place-to-add-class").addClass("your-animation");
});
我写了一个超级简单的jQuery插件来实现类似于此。我想要的东西真的重量轻(这是精缩732个字节),所以包括大插件或UI是出了问题对我来说。它仍然是周围的边缘有点粗糙,所以反馈是值得欢迎的。
您可以在这里签插件: https://gist.github.com/4569265
使用插件,这将是一个简单的事情,通过改变背景颜色,然后添加setTimeout
火插件褪色回到原来的背景颜色来创建一个突出显示效果。
仅使用简单的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);
的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>
在印刷,黄色是减蓝,所以与第三RGB元件(蓝色)在小于255点开始开始接触黄色亮点。然后,直到它达到255在设定10+
值var unBlue
递增减蓝。