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