質問
私はテーブルの列の背景色でフェードしようとしていますが、それを正しく理解できません。ボタンがクリックされるとフェードインが発生します。
私は次のようなものを試しました:
$("#row_2").fadeIn('slow').css('background', 'gold')
そして、これはテーブルの列に色を適用しますが、それはフェードインしませんが、すぐに適用します。
これは簡単なことだと確信していますが、答えが見つかりません。私はこのウェブサイトを見渡しましたが、それでもこの特定のことを運んでいません。
前もって感謝します
解決
純粋なjQueryには、色をアニメーション化する機能がありません。使用する必要があります jqueryui また jQueryカラープラグイン.
次に、使用します .animate()
働き。
他のヒント
ピーター・ペラー まだ雇用していない場合はスポットオンです jquery ui, 、少なくともに行きます 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);
}
);
残念ながら、背景色でフェードすることはできません(jQueryの最新リリースについては知りません)。ただし、この目的のためにこのプラグインを使用できます。
今、あなたがそのプラグインを使用するかどうかはあなた次第です。
JQueryのハイライト効果はどうですか、次のように
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
また、色と持続時間を指定することもできます。詳細については詳しく知ることができます jQueryサイト.
所属していません StackOverflow