Jquery 淡入淡出背景/表格行上的动画背景颜色

Question

经过大量谷歌搜索并浏览这里的其他帖子后，我仍然无法确定这是否可能。我想基本上在我的表格行上设置一个背景颜色，在 :hover 上快速淡出为另一种颜色 - 这可以用 Jquery 实现吗？

我正在使用多个表格，这些表格将具有或希望具有不同的背景悬停颜色，目前我仅使用CSS来执行悬停事件，但显然我想尝试添加一个微妙但漂亮的效果效果，因为它们是漂亮的粗表格行。

****编辑****

我找到了一个解决方案:我正在使用 Jquery UI -

$('tr').mouseover(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "#666" }, 1000);
});

Answer 1

由于您希望表格单元格的背景悬停事件具有不同的颜色，因此 jsFiddle向您展示如何使用背景颜色属性通过NTSC 颜色的伪颜色图更改鼠标悬停时每个单元格的颜色。

不需要 jQuery 或其他库，因为这个纯 CSS 解决方案可以快速跟上用户鼠标的位置。

我认为在我提供的示例中使用动画淡入淡出会使太多单元格徘徊于过渡，从而导致困惑。也就是说，如果需要的话，添加 jQuery 动画效果仍然很容易，但这取决于您的表格布局方案。

这是修改后的 jsFiddle使用 jQuery。