jquery - jQuery淡入背景颜色

Question

我试图淡入表格行的背景颜色，但无法正确处理。单击按钮时会发生淡入。

我试过类似的东西：

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

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

我确信这是一件简单的事情，但我找不到答案。我已经浏览了这个网站，但对于这个特定的东西仍然没有运气。

提前致谢

Answer 1

纯 jQuery 没有动画颜色的功能。您必须使用jQueryUI或jQuery 颜色插件。

然后使用.animate()函数。

Answer 2

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 3

不幸的是，背景颜色不可能淡化（我不知道最新版本的 jquery）。但是，您可以为此目的使用此插件：

高亮淡入淡出

现在由您决定是否使用该插件仅用于背景褪色效果:)

Answer 4

jquery高亮效果怎么样，像这样：

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

您还可以指定应突出显示的颜色和持续时间。您可以从jquery 站点了解更多信息。