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

Posted 2023-05-08

【中文标题】Jquery淡入淡出背景/表格行上的动画背景颜色

【英文标题】：Jquery fade background / animate background colour on table row

【发布时间】：2012-05-31 20:38:46

【问题描述】：

经过大量谷歌搜索和查看这里的其他帖子后，我仍然无法确定这是否可行。我想基本上在我的表格行上设置一个背景颜色，在 :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);
);

【问题讨论】：

当您将鼠标悬停在其子 td 上时，可以通过向父 tr 添加一个类/样式属性。

【参考方案1】：

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

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

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

这是使用 jQuery 修改后的 jsFiddle。

【讨论】：

谢谢我真的很喜欢这种方法

谢谢。这个jsFiddle 只展示了如何使用 jQuery 选择器 1 次，因为您所做的所有事情都是通过查询 .mouseout 追加到 .mouseover。

【参考方案2】：

您可以使用 jQuery UI 的Color Animate effect。

【参考方案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);
);

【讨论】：

我前两天提供给你的修改后的jsFiddle是使用jQuery UI的。它作为左侧的资产加载。另外，我的 jQuery 标记使用了一个变量来表示在函数顶部设置的持续时间。我的回答对你来说不是很有帮助吗？

【参考方案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;

【讨论】：

但这不会达到淡化效果？

用简单的不透明效果更新了答案，但这可能不是你想要的。如果你正在寻找一个不错的淡入淡出背景效果，你需要使用一个插件来实现 ***.com/questions/734068/…