jQuery在背景颜色淡入淡出

Question

我试图淡入淡出表格背景颜色，并且无法正确显示。单击按钮时将发生淡入。

我想是这样的：

$("#row_2").fadeIn('slow').css('background', 'gold') 

虽然这将颜色应用到表行，它不会褪色相同，但是在一次应用它。

我确定这是一件简单的事情，但我找不到答案。我在这个网站上浏览过所有内容，但对于这个特定的东西仍然没有运气。

在此先感谢

Answer 1

纯jQuery的没有功能来动画颜色。您必须使用jQueryUI或jQuery color plugin。

然后使用.animate()函数。

Answer 2

不幸的是这是不可能的背景颜色（我不知道的jQuery的最新版本）褪色。但是你可以使用这个插件用于这一目的：

highlightFade

现在就看你是否把使用插件或不只是背景渐变效果:)

Answer 3

Peter Peller是点亮的，如果您还没有使用jquery UI，那么至少要使用jQuery color plugin。

下面的代码片段，我怃横跨多种浏览器取得了成功：

<a href="#" ID="fadeTable" title="click to fade col1">Click to fade Column 1</a> 
<table width="400px" border="1" cellspacing="0" cellpadding="1" 
         summary="This is my test table"> 
    <caption align="top"> 
    My Caption 
    </caption> 
    <tr> 
    <th scope="col" class="row0 col1" >Col 1</th><th scope="col">Col 2</th> 
    </tr> 
    <tr> 
    <td class="row1 col1" >one</td><td>Uno</td> 
    </tr> 
    <tr> 
    <td class="row2 col1" >two</td><td>Dos</td> 
    </tr> 
</table> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    // requires http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js 
    var iAniSpeed = 2000; 
    var sBgColor = 'gold'; 
    $('#fadeTable').click(function(){ 
     $('td.col1').animate({ backgroundColor: sBgColor }, iAniSpeed); 
     return false;  
    }); 
}); 
</script> 

作为替代，你可能希望第一种颜色的背景，其原来的颜色，然后进行动画来新的颜色。

要做到这一点，只是像这样的东西取代目前的动画块：

$('td.col1').animate({ backgroundColor: 'white' }, 250, function() 
     { 
     $(this).animate({ backgroundColor: 'gold' }, 2000); 
     } 
); 

Answer 4

什么jQuery的高亮效果，像这样：

$("div").click(function() { 
     $(this).effect("highlight", {}, 3000); 
}); 

你也可以指定颜色和持续时间它应该被高亮显示。你可以从jquery site了解更多。