jQuery淡入背景颜色

Question

我正在尝试淡入一个表格行的背景颜色，但一直无法成功。当单击按钮时，淡入效果将会发生。

我尝试过类似以下的代码：

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

虽然这将会给表格行应用颜色，但它不会淡入，而是立即应用它。

我相信这是一件简单的事情，但我找不到答案。我已经在这个网站上搜索了很久，但对于这个特定的问题仍然没有找到答案。

先谢过了。

- Marcos Placona

---

你是否尝试淡化颜色？那么请使用Sarfraz建议的插件。如果你只是想知道为什么颜色会立即改变，很可能元素已经可见。在.fadeIn()之前尝试添加.hide()。 - jAndy

Answer 1

纯粹的jQuery没有动画颜色的功能。您需要使用jQueryUI或jQuery颜色插件。

然后使用.animate()函数。

- Petr Peller

Answer 2

Peter Peller说得很对，如果你还没有使用jQuery UI，那么至少可以选择jQuery color插件。

下面是我编写的代码片段，在各种浏览器中都取得了成功：

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

- Dean Peters

Answer 3

很遗憾，无法淡入背景颜色（我不知道jquery的最新版本是否可以）。但是，您可以使用此插件来实现此目的：

highlightFade

现在，您可以自行决定是否仅使用该插件来实现背景淡入效果 :)

- Sarfraz

Answer 4

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

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

同时，您还可以指定高亮显示的颜色和持续时间。您可以从jQuery网站了解更多信息。

- vkGunasekaran

---

为了让其他人确认，这个方法需要使用jQuery UI。 - BIOSTALL