jQueryでカラーをアニメーションさせる

5月 13th, 2012

jQueryのanimateでは、数値ではないものはアニメーション出来ません。
なのでテキストや背景の”色”は

$(this).animate(
    	{ 
    	backgroundColor: "black",
    	color:"#00ff00" 
    	}, 
    	1000
    	);

などとやっても変化しません。

これをするにはjQuery UIを使います。
jQuery UI – Home

これでjQueryのanimeteと同じ書き方で色もアニメーション出来ます。

<script>
$(function(){
	$(".block").click(function() {
    	$(this).animate(
    	{ 
    	backgroundColor: "black",
    	color:"#00ff00" ,
    	top:"300px"
    	}, 
    	1000
    	);
	});
});
</script>


サンプル
jQuery UI animateサンプル

参考:
jQuery UI – Animate Demos

Related Posts