色をアニメーションで変更する「jQuery Colorプラグイン」 JavaScript Library Archive

色をアニメーションで変更する「jQuery Colorプラグイン」

Check Tweet

配布元:jquery/jquery-color · GitHub
ライセンス:MITライセンス

jQueryのanimateメソッドは、top、bottomやmargin、padding、width、heightなどの数値を指定できるプロパティをしかアニメーションさせることはできませんが、jQuery Colorプラグインを読み込むことで色に関してもアニメーションで変化させることが可能になります。

利用方法

jQuery本体とダウンロードしたjquery.color-2.1.1.jsを読み込むことで、色に関してアニメーション指定が可能になります。

次のサンプルでは#d1がクリックされた際に#d1の色を赤から白にアニメーションして変更しています。

$("#d1").click(function(){
	$(this).animate({
		"backgroundColor":"#FFFFF"
	});
});

sample

このプラグインでは以下のCSSプロパティに関してアニメーションさせることが可能です。

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• columnRuleColor
• outlineColor
• textDecorationColor
• textEmphasisColor

スポンサードリンク

コメント

カテゴリー：jQuery ライブラリ 拡張

直前:古いブラウザをhashchangeイベントに対応させる「jQuery hashchange event」

直後:IE8以下をHTML5の新要素に対応させる為の「html5shiv」