jquery淡入背景色

纯jquery没有设置颜色动画的功能。你必须使用 jQueryUI 或 jQuery color plugin .

然后使用 .animate() 功能。

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

不幸的是,它不可能淡入背景色(我不知道jquery的最新版本)。但是,您可以为此目的使用此插件:

highlightFade

现在取决于您是否使用该插件来实现背景淡入效果:)

jquery突出显示效果如何,如下所示:

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

您还可以指定颜色和持续时间,它应该是高亮度的。你可以从中学到更多 jquery site .