jQuery　エフェクトを設定する


　jQueryではいくつかの基本エフェクトが用意されています。
　それぞれのメソッドのパラメータには速度を指定します。この速度はslow, normal, fastの3つを指定することができます。
以下のサンプルはshow()を使ったサンプルでボタンをクリックすると段落の内容が拡大しフェードインしながら表示されます。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<style type="text/css"><!--
.mainText {
background-color:#ffd;
color:red;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").show("slow");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p class="mainText">ここの段落がエフェクトにより表示されます。</p>
</body>
</html>

　上記のサンプルでは最初から段落が表示されてしまっています。実際の用途では段落は非表示になっているはずです。この場合にはaddClass()を使って表示処理を行うスタイルシートを設定するようにします。ただ、すでに表示済みの場合にはエフェクトを適用させたくないこともあります。このような場合には$("p:hidden")とすると表示されていない場合のみエフェクトの対象となります。逆に表示されている場合のみ処理したい場合には$("p:visivle")のように指定します。以下のサンプルはボタンをクリックすると段落が表示されます。ボタンを何度も押すと何度でもエフェクト処理が行われます。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<style type="text/css"><!--
.mainText {
background-color:#ffd;
color:red;
border:1px solid black;
visibility:hidden;
}
.showText {
visibility:visible;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").addClass("showText").show("slow");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p class="mainText">ここの段落がエフェクトにより表示されます。</p>
</body>
</html>

　フェードインエフェクトの場合は以下のようになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<style type="text/css"><!--
.mainText {
background-color:#ffd;
color:red;
border:1px solid black;
visibility:hidden;
}
.showText {
visibility:visible;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").addClass("showText").fadeIn("slow");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p class="mainText">ここの段落がエフェクトにより表示されます。</p>
</body>
</html>

　スライドエフェクトの場合は以下のようになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<style type="text/css"><!--
.mainText {
background-color:#ffd;
color:red;
border:1px solid black;
visibility:hidden;
height:100px;
}
.showText {
visibility:visible;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").addClass("showText").slideDown("slow");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p class="mainText">ここの段落がエフェクトにより表示されます。</p>
</body>
</html>

　スライドエフェクトの場合は以下のようになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<style type="text/css"><!--
.mainText {
background-color:#ffd;
color:red;
border:1px solid black;
visibility:hidden;
height:100px;
}
.showText {
visibility:visible;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").addClass("showText").slideDown("fast");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p class="mainText">ここの段落がエフェクトにより表示されます。</p>
</body>
</html>
[目次へ]

(2006.8.5)