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

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

You might also like

Leave Your Comment