jQueryでエフェクト処理

categories: javascript

前回に続いて、今回はエフェクトをやってみる。そろそろCSS / JavaScriptで同等コードを書くのが面倒になってくるのでjQueryのみで行きます。ベースのHTML / CSSはこんな感じ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="effects.css" />
		<script type="text/javascript" src="jquery-1.4.4.js"></script>
		<title>jQuery effects</title>
	</head>
	<body>
		<div id="box">
		</div>
	</body>
</html>
@charset "utf-8";

#box {
	width: 200px;
	height: 200px;
	background-color: blue;
	display: none;
}

表示・非表示

id=”box”を1000ms間隔で表示・非表示させる。

$('#box').show(1000);
$('#box').hide(1000);

第二引数に終了時に実行するコールバック関数を指定出来る。

フェードイン・フェードアウト

id=”box”を1000ms間隔でフェードイン・フェードアウトで表示・非表示させる。

$('#box').fadeIn(1000);
$('#box').fadeOut(1000);

第二引数に終了時に実行するコールバック関数を指定出来る。

スライドダウン・スライドアップ

id=”box”を1000ms間隔で上からスライドダウン・スライドアップで表示・非表示させる。

$('#box').slideDown(1000);
$('#box').slideUp(1000);

第二引数に終了時に実行するコールバック関数を指定出来る。

透明度

id=”box”を1000ms間隔で徐々に透明度を変化させて表示・非表示させる。

$('#box').fadeTo(1000, 1);
$('#box').fadeTo(1000, 0);

第二引数が透明度(0〜1)
第三引数に終了時に実行するコールバック関数を指定出来る。

独自アニメーション

id=”box”を1000msで右下に200pxずつ移動させる。

$('#box').show();
$('#box').animate({'margin-top' : '200px', 'margin-left' : '200px'}, 1000);

第一引数はスタイル(pxなど数値指定のもの)を指定する。
第三引数に終了時に実行するコールバック関数を指定出来る。

次回からはjQueryを使ってみたい一番の目的だったjQuery UIをやってみたいと思う。

tags: ,

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。コメントは承認制です。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Trackback URL