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

Question

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

这就是我现在正在做的事情:

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

我怎么能淡出课程newrow？

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

Answer 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小提琴演示.

使用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小提琴演示.

请注意,jQuery本身不能为元素的coloror background-color属性设置动画,但jQuery UI可以.虽然有一个替代的jQuery颜色插件也添加了这个功能,它可能比添加最小化(并且只有相关模块)jQuery UI更轻量级.

参考文献:

• " 使用CSS动画的," Mozilla开发者网络的CSS库.