使用Javascript(或jQuery)淡入/淡出HTML元素的背景颜色 [英] Fade in / fade out background color of an HTML element with Javascript (or jQuery)
问题描述
我有一张表,其行需要突出显示&然后清除。我正在使用上下文类来为表行着色(不是必要的要求) 。 javascript部分如下。我怎样才能使用javascript / jQuery / Bootstrap动画即fadeIn / fadeOut行的颜色。下面的代码立即添加&删除颜色。
I have a table whose row needs to be highlighted & then cleared. I'm using contextual classes to color the table rows (not a necessary requirement). The javascript part is given below. How can I animate i.e. fadeIn / fadeOut the coloring of rows using javascript / jQuery / Bootstrap. The code below instantly adds & removes the color.
$('tr').eq(1).addClass('success');
setTimeout(function(){
$('tr').eq(1).removeClass('success');
},2000);
PS在此尝试避免 jQuery UI 路由如何使用jquery淡入/淡出背景色?
P.S. Trying to avoid the jQuery UI route here How do you fade in/out a background color using jquery?
推荐答案
这就是我做的东西。它可以很好地工作,而不需要任何UI库。如果需要,甚至可以删除jQuery。
Here's what I cooked up. It works nicely without the need of any UI library. Even jQuery can be eliminated if needed.
//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包含在一个匿名函数,使其在循环中正常工作(原因)
- SetTimeout increases the lightness from 50% to 100%, essentially making the background white (you can choose any value depending on your color).
- SetTimeout is wrapped in an anonymous function for it to work properly in a loop ( reason )
这篇关于使用Javascript(或jQuery)淡入/淡出HTML元素的背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!