3

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

4 回答 4

1

您可以使用 jQuery UI 的Color Animate 效果。

于 2012-05-25T09:16:14.977 回答
1

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

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

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

这是一个使用 jQuery修改过的jsFiddle 。

于 2012-05-25T10:39:12.300 回答
1

我找到了解决方案：我正在使用 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);
});
于 2012-05-25T14:30:30.037 回答
0

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

     $('#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;}
于 2012-05-25T09:14:54.110 回答