jQuery渐变背景/在表格行上动画背景颜色

Question

经过大量的谷歌搜索和查看其他帖子，我仍然无法确定这是否已经可行。我想基本上在我的表格行上设置一个固定的背景颜色，在:hover时快速淡出到另一种颜色 - 这是否可以使用Jquery实现？

我正在使用多个表格，它们将具有不同的背景悬停颜色，目前我只是使用CSS进行hover事件，但显然我想尝试添加微妙但不错的效果，因为它们是漂亮而厚重的表格行。

****编辑****

我找到了一个解决方案：我正在使用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);
});

- Gerico

---

当您悬停在子td上时，通过向父tr添加class / style属性是可能的。 - Bob

Answer 1

您可以使用jQuery UI的颜色动画效果。

- JackingLiu

Answer 2

由于您想要为表格单元格的背景悬停事件使用不同的颜色，这个 jsFiddle 展示了如何使用背景颜色属性通过 NTSC 颜色的伪彩色图 在鼠标悬停时更改每个单元格的颜色。

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

我认为在我提供的示例中使用动画淡入淡出会导致太多的单元格过渡停留，从而引起混乱。话虽如此，如果需要，仍然很容易添加 jQuery 动画效果，但这取决于您的表格布局方案。

这里是一个使用 jQuery 的修订版 jsFiddle。

- arttronics

---

谢谢，我真的很喜欢这种方法。 - Gerico

谢谢。这个jsFiddle展示了如何仅使用一次jQuery选择器，因为你所做的只是通过查询**.mouseout到.mouseover**进行附加。 - arttronics

Answer 3

我找到了一个解决方案：我正在使用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);
});

- Gerico

---

我两天前为您提供的修订版jsFiddle使用了jQuery UI。它作为资产加载在左侧。此外，我的jQuery标记正在使用一个变量来设置函数顶部的时间持续时间。难道我的答案不是您发现有帮助的解决方案吗？ - arttronics

Answer 4

这是我在一个项目中使用的代码。

     $('#table1 td, #table2 td').hover(function(){
        $(this).parents('tr').addClass('active').animate({opacity: 0.65,}, 500);
        $(this).parents('tr').addClass('active').animate(
             {opacity: 0.65,}, 500, function() {
           //Animation complete.
           $(this).animate({opacity: 1,}, 'slow');
     });
        $(this).mouseleave(function(){
            $(this).parents('tr').removeClass('active');
        });
    });

在你的css中，应该有类似这样的代码：

#table1 .active { background: #CCC;}
#table2 .active { background: #F2F2F2;}

- Bob

---

但这样做无法实现淡入淡出效果？ - Gerico

更新了答案，使用简单的不透明度效果，但这可能不是您想要的。如果您正在寻找一个漂亮的淡入淡出背景效果，您需要使用一个插件。https://dev59.com/THRB5IYBdhLWcg3wEDul - Bob