缓慢地从前置行中删除背景颜色答案

【问题标题】：removing background color from prepended rows slowly缓慢地从前置行中删除背景颜色
【发布时间】：2013-09-03 14:33:39
【问题描述】：

我通过单击按钮将行添加到预先存在的表中。为了区分添加了哪些行，我为添加的行添加了背景颜色。但是，我想在一段时间后删除此背景颜色或将其淡出。

这是我现在正在做的事情：

    $("#numlist").prepend("<tr class='newrow'><td>somenum</td></tr>");

如何淡出课程newrow？

这里也是一个例子：http://jsfiddle.net/Nx2nC/

【问题讨论】：

可能重复stackoverflow.com/questions/190560/…

标签： javascript jquery html css

【解决方案1】：

我建议使用 CSS 动画：

@-mozilla-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-ms-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-o-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@-webkit-keyframes newRowAdded {
    from {
        background-color: #ffa;
    }
    to {
        background-color: #fff;
    }
}
@keyframes newRowAdded {
    /* 'from' is that starting position/frame */
    from {
        background-color: #ffa;
    }
    /* 'to' is the final position/frame */
    to {
        background-color: #fff;
    }
}

.newrow {
                  /* first: the animation-name,
                     second: the animation duration (s for seconds): */
    -moz-animation: newRowAdded 2s;
    -ms-animation: newRowAdded 2s;
    -o-animation: newRowAdded 2s;
    -webkit-animation: newRowAdded 2s;
    animation: newRowAdded 2s;
}

JS Fiddle demo.

使用 CSS 动画不可避免的缺点是旧浏览器，特别是但不限于 Internet Explorer，将无法实现此解决方案。关注那些不兼容的浏览器，如果您愿意并且能够实现 jQuery UI 以及 jQuery 本身：

$("#add").click(function (event) {
    event.preventDefault();
    $("#numlist tbody").prepend("<tr class='newrow'><td>somenum</td></tr>").find('.newrow:first').css('background-color', '#ffa').animate({
        'background-color' : '#fff'
    }, 2000);
});

JS Fiddle demo.

请注意，jQuery 本身不能为元素的color 或background-color 属性设置动画，但是jQuery UI 可以。虽然有一个备用的jQuery color plugin 也添加了这个工具，但它可能比添加最小化（并且仅来自）jQuery UI 的相关模块更轻量。

参考资料：

'Using CSS animations,'Mozilla Developer Network's CSS repository。

【讨论】：

我应该提到..该表已经在使用 twitter bootstrap 提供的table-strippd css 属性。我认为这会阻止它仅突出显示备用行。有没有办法避免这种情况？
那会很有帮助；您可以更新提供的 Fiddle 为这些行添加相关的 CSS 以实现条带化吗？也许合并 Twitter 的 Bootstrap 库？
很抱歉。这是使用引导程序和您提供的 jQuery UI 建议的更新小提琴：jsfiddle.net/GGMWX/652

【解决方案2】：

你可以使用 setTimeout() 来移除类

    var $el = $("#numlist").prepend("<tr class='newrow'><td>somenum</td></tr>");
    setTimeout(function() { $('.newrow',$el).removeClass('newrow')}, 1000);

你可以使用 css 过渡来实现淡化效果

.newrow {
   background-color: red;
   transition: background-color 1s linear;
}
tr {
  background-color: none;
  transition: background-color 1s linear;
}

http://jsfiddle.net/Nx2nC/13/

【讨论】：

他要求背景颜色淡出，而不是消失
他要求移除或淡入背景。这可以通过 css 转换来实现 jsfiddle.net/Nx2nC/12
问题的标题是“从前置行中慢慢移除背景颜色”

【解决方案3】：

试试这个：

$("#add").click(function (e) {    
  e.preventDefault();
  var $tr = $("<tr/>",{"class":"newrow","html":"<td>somenum</td>"}).hide();

    $("#numlist").prepend($tr.show("slow"));
    setTimeout(function(){
        $tr.css("background-color","#fff")
    },1500);
});

在这里工作小提琴：http://jsfiddle.net/Nx2nC/9/

【讨论】：