Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQuery UI Effect

jQuery UI

今回は、jQuery UIのEffectについて書きます。


Effectは、アニメーションエフェクトのことです。
高度な表示効果を実現できます。

アニメーション前
f:id:gupuru:20140224225502p:plain
アニメーション後
f:id:gupuru:20140224225505p:plain


このように使います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery ui</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
	
	<div id="hako"></div>

<style>
#hako{
	width: 300px;
	height: 300px;
	background: red;
}
</style>

<script>
$(function(){
	
	$('#hako').click(function() {
		$(this).effect("explode");
	});
	
});
</script>
</body>
</html>

実行結果↓
アニメーション前
f:id:gupuru:20140224225502p:plain
アニメーション後
f:id:gupuru:20140224225505p:plain



「effect("アニメーション名");」とすれば、実装できます。
上のプログラムでは、ボックスをクリック後にアニメーションするようにしています。

$('#hako').click(function() {
		$(this).effect("explode");
	});

アニメーションの種類は、かなり多くあります。詳しくはこちらを見てください。


Effectには、いくつかのオプションがあります。


いくつか紹介します。

①「hide」

「hide」を使うと、イベントがあったときに何かを隠せるアニメーションができます。
例えば、ボタンを押すとボックスが隠れるとか。
このように使います。
HTML

<div id="hako"></div>

	<button id="btn">押す</button>

	<style>
	#hako{
		width: 300px;
		height: 300px;
		background: red;
	}
	</style>

javascript

	$('#btn').click(function() {
		$('#hako').hide("puff");
	});

ボタンを押すと、ボックスがきえます。


②「show」
「show」を使うと、イベントがあったときに何かを出現するアニメーションができます。
例えば、ボタンを押すとボックスが出現するとか。
このように使います。

<div id="hako"></div>

	<button id="btn">押す</button>

	<style>
	#hako{
		display: none;
		width: 300px;
		height: 300px;
		background: red;
	}
	</style>

$('#btn').click(function() {
		$('#hako').show("shake");
	});

ボタンを押すと、ボックスが出現します。

参考サイト
Effects | jQuery UI API Documentation
Effect | jQuery UI