JavaScriptを使ってアニメーション表示する。

taka_oj
|
2015年10月15日
| コメントはまだありません
| JavaScript

JavaScriptで簡単なアニメーション表示させます。表示ボタンを押して下さい。

↓以下が実際のソースサンプルです。

▼JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		
<script>
		
		$(function(){
			$("button").click(function(){
			$("div#black:not(:animated)").show(500,function(){
			$(this).hide(1500);
			$("div#yellow:not(:animated)").show(500,function(){
			$(this).hide(1500);
					});
				});
			});
		});

</script>

▼CSS

<style>
div {
	width:400px;
	height:400px;
	display:none;
	position:absolute;
}

#black {
	background:#000;
}

#yellow {
	background:#CF0
}

</style>

▼HTML 

<body>
		<button>表示</button>
		<div id="black"></div>
		<div id="yellow"></div>
</body>

デモページは、こちら

JavaScript