Question

我有一张表，其行需要突出显示＆amp;然后清除。我正在使用contextual classes为表行着色（不是必需的要求）。 javascript部分如下。我怎样才能使用javascript / jQuery / Bootstrap动画即fadeIn / fadeOut行的颜色。下面的代码立即添加＆amp;删除颜色。

$('tr').eq(1).addClass('success');

setTimeout(function(){
    $('tr').eq(1).removeClass('success');
},2000);

http://jsfiddle.net/5NB3s/

P.S。尝试避免 jQuery UI 路线How do you fade in/out a background color using jquery?

Answer 1

这是我做的东西。它可以很好地工作，而不需要任何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包含在匿名函数中，以便在循环中正常工作（reason）

Answer 2

一种方法可能是：

JS ：

$('tr').eq(1).hide().addClass('success').fadeIn('slow');

setTimeout(function(){
  $('tr').eq(1).fadeOut('slow',function(){ $(this).removeClass('success').show();});
},2000);

Bootply ：http://www.bootply.com/123956

的更新 的第二种方式，更好，但......我会解释：

Bootply ：http://www.bootply.com/123956 [仍然是相同的网址，不用担心]

JS ：

$('tr').eq(1).animate({ backgroundColor: "#dff0d8" }, 2000 ); setTimeout(function(){ $('tr').eq(1).animate({ backgroundColor: "#ffffff" }, 2000 ); },2000);

你必须使用jQueryUI animate，结果看起来不错......

Answer 3

我遇到了同样的问题，除了编程之外，找不到一个简单的方法。实现fadding BG颜色的另一种方法是在悬停它们时为每一行使用CSS属性。

#RowID{
background-color: #ececec;
background-color: rgba(236, 236, 236, 0.901961);
-moz-transition: background-color 1s cubic-bezier(1,1,1,1);
-moz-transition-delay: 0.5s;
-ms-transition: background-color 1s cubic-bezier(1,1,1,1);
-ms-transition-delay: 0.5s;
-o-transition: background-color 1s cubic-bezier(1,1,1,1);
-o-transition-delay: 0.5s;
-webkit-transition: background-color 1s cubic-bezier(1,1,1,1);
-webkit-transition-delay: 0.5s;
transition: background-color 1s cubic-bezier(1,1,1,1);
transition-delay: 0s;
}

#RowID:hover {
    background-color: rgb(206, 128, 128);
}

此外，您始终可以设置BG更改设置转换延迟属性所需的延迟。

JSFiddle

Answer 4

105的{{1}}是黄色的开始。 rgb(255,255,105)调用中的100是黄色渐变为白色的速度。

setInterval

Answer 5

类似于上面的用户答案，除了处理淡入淡出，我将不透明值更改为淡入和淡出。我还使用id标记来定位不同的表格单元，因此我们使用了不同的颜色。首先，您需要使用id属性标记单元格：

<td id="cellToShade">.01</td>

然后将javascript放在下面的行中以设置超时并更改不透明值：

<script>

var d = 500;
var opaqueness=.05;
for(var i=0; i<=600; i=i+1){ 
    d  += 10;
    opaqueness += .0001;
    (function(i,d, opaqueness){
        setTimeout(function(){
            document.getElementById("cellToShade").style.background = "rgba(255, 0, 0, "+ opaqueness +")";
        }, d);    
    })(i,d, opaqueness);

}

</script>

您可能需要使用不透明变量i和d来获得所需的效果定时。

Answer 6

jQuery已经具有fadeOut()选项。为什么不仅仅使用它和位于要突出显示的元素后面的div？您所需要的只是一点CSS / JavaScript魔术。这很容易，并且您得到了由jQuery开发人员编码的美观，平滑的fadeOut（）...

JSBin Demo-

function highlightElement(element) {
        const background = $('<div></div>');

        $(background).css({
                'position':'relative',
                'top':'-' + $(element).height() + 'px',
                'background-color':'yellow',
                'z-index':'-10',
                'height':$(element).height() + 'px',
                'width':$(element).width() + 'px',
                'margin-bottom':'-' + $(element).height() + 'px',
                'padding':'0px',
                'float':'left',
        });

        $(background).appendTo(element);

        $(background).fadeOut(5000);

        return true;
}

添加一些解释：

background CSS结合使用负的底边距（根据元素大小计算）和负的top来正确定位。 width当然是已设置的，但这只会影响宽度，而不会影响整体位置。 z-index强制将我们要创建的虚拟元素置于其下方。
fadeOut(5000)淡出我们刚刚创建的虚拟背景元素。

使用Javascript（或jQuery）淡入/淡出HTML元素的背景颜色

6 个答案: