Question

经过大量谷歌搜索并查看其他帖子，如果可能的话，我仍然无法解决问题。我想基本上在我的表行上设置一个背景颜色，然后快速淡化成另一种颜色：悬停 - 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

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

Answer 2

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

由于纯CSS解决方案能够快速跟上用户的鼠标位置，因此无需 jQuery 或其他库。

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

这是使用jQuery修订的jsFiddle。

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);
});

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;}

Jquery退去背景/有生气勃勃在桌行的背景颜色

4 个答案: