jQueryのアニメーションサンプル

この領域の表示を切り替えます。

$("input#show").click(function(){
	$("p#cont:not(:animated)").show("slow");	
	});
	
$("input#hide").click(function(){
	$("p#cont:not(:animated)").hide("slow");	
});

この領域の表示を交互に切り替えます。

$("input#toggle").click(function(){
	$("p#conttoggle:not(:animated)").toggle("slow");	
});

この領域の表示をスライド表示で切り替えます。

$("input#slideup").click(function(){
		$("p#contslide:not(:animated)").slideUp("slow");	
});

$("input#slidedown").click(function(){
	$("p#contslide:not(:animated)").slideDown("slow");	
});
		
$("input#slidetoggle").click(function(){
	$("p#contslide:not(:animated)").slideToggle("slow");	
});

この領域の表示を徐々に切り替えます。

$("input#fadein").click(function(){
	$("p#contfade:not(:animated)").fadeIn("slow");	
});
	
$("input#fadeout").click(function(){
	$("p#contfade:not(:animated)").fadeOut("slow");	
});

$("input#fadeto").click(function(){
	$("p#contfade:not(:animated)").fadeTo("slow",0.5);	
});

この領域のアニメーションを指定します。

$("input#animate").click(function(){
	$("p#contanime:not(:animated)").animate(
		{ width : "500px",height : "50px",opacity : 0.5,fontSize : "150%" },
		{ duration : "slow",easing : "swing"}
	)	
});