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来改变鼠标悬停每个单元的颜色颜色。

有，因为这纯CSS解决方案与用户的鼠标位置保持快速向上无需jQuery的或其他图书馆。

我认为我提供会使与过渡造成混乱流连忘返太多细胞例如使用动画褪色。也就是说，如果需要添加jQuery动画效果仍然很容易，但取决于您的表格布局方案。

这是使用jQuery修订的jsFiddle。

Answer 2

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

 $('#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;} 

Answer 3

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

Answer 4

我找到了解决办法：我使用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); 
});