12

表の行の背景色をフェードインしようとしていますが、正しく表示できません。ボタンがクリックされると、フェードインが発生します。

私は次のようなことを試しました：

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

これにより、テーブルの行に色が適用されますが、フェードインはしませんが、一度に適用されます。

これは簡単なことだと思いますが、答えが見つかりません。私はこのウェブサイト全体を見てきましたが、それでもこの特定のことには運がありません。

前もって感謝します

4

4 に答える 4

18

純粋なjQueryには、色をアニメーション化する機能はありません。jQueryUIまたはjQueryカラープラグインを使用する必要があります。

次に、.animate()関数を使用します。

于 2010-04-16T10:59:41.670 に答える
9

Peter Pellerはスポットオンです。まだjqueryUIを使用していない場合は、少なくともjQueryカラープラグインを使用してください。

以下は、さまざまなブラウザで成功したコードスニペットです。

<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);
      }
  );
于 2010-04-16T14:52:08.847 に答える
1

残念ながら、背景色をフェードインすることはできません（jqueryの最新リリースについてはわかりません）。ただし、このプラグインはその目的で使用できます。

ハイライトフェード

そのプラグインをバックグラウンドフェージング効果だけに使用するかどうかはあなた次第です:)

于 2010-04-16T10:51:42.837 に答える
0

次のようなjqueryハイライト効果はどうですか？ 

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

また、強調表示する色と期間を指定することもできます。あなたはjqueryサイトからもっと学ぶことができます。

于 2012-04-06T11:18:06.273 に答える