JavaScript JQuery Effects関連のメソッドの使い方（show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle）

2021/09/28

以前、ウインドウ的に div 領域を表示・非表示するために JQuery メソッドの fadeIn, fadeOut を使いましたが、
（⇒JavaScript jQueryでモーダルウインドウ風の表示をする方法（css:display, css:z-index, fadeIn, fadeOut））
今回は要素に対する表示について表示・非表示処理をより細かく制御できる JQuery メソッドについて説明します。

■このページの内容

先ずはオブジェクトの表示・非表示の簡単な例
各種の JQuery メソッド
easing の指定（変化速度）
easing の指定（変化速度）jQuery UI Effect プラグインを導入
フェードイン・アウト処理（コールバック関数の例を含む）

■先ずはオブジェクトの表示・非表示の簡単な例

JQuery メソッドの show, hide を使い div HTMLオブジェクトを表示・非表示の処理を行います。

<html>
<head>
<meta charset="utf-8">
<title>先ずはオブジェクトの表示・非表示の簡単な例</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShow() {
    $("#menu").show();
}
//非表示処理
function fncHide() {
    $("#menu").hide();
}
</script>
</head>
<body>
    <h2>先ずはオブジェクトの表示・非表示の簡単な例</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShow();">表示</button>
    <button onclick="fncHide();">非表示</button>
</body>
</html>

この show, hide には引数が指定でき、表示・非表示にアニメーション的な動きを付加できます。アニメーションと言っても漫画的な動きでは無く、表示していく動作の時間を指定したりして、画面上では連続的な変化が付けられます。

それでは、以下に各種の JQuery メソッドの説明を記します。

■各種の JQuery メソッド

関数	書式	説明
show	.show() .show( duration [, callback] ) .show( [duration] [, easing] [, callback] ) .show( [options] ) duration:フェードするアニメーション時間を指定 easing :アニメーションの変化の種類を指定 callback:アニメーション完了後に実行したい関数を指定 options :duration等をオブジェクトで指定	表示処理を行う
hide	.hide() .hide( duration [, callback] ) .hide( [duration] [, easing] [, callback] ) .hide( [options] ) ※引数は show と同様	非表示処理を行う
toggle	.toggle() .toggle( duration [, callback] ) .toggle( [duration] [, easing] [, callback] ) .toggle( [options] ) ※引数は show と同様	表示・非表示の反転
fadeIn	.fadeIn( duration [, callback] ) .fadeIn( [duration] [, easing] [, callback] ) .fadeIn( [options] ) ※引数は show と同様	フェードイン
fadeOut	※書式は fadeIn と同様	フェードアウト
slideUp	※書式は fadeIn と同様	スライドアップ
slideDown	※書式は fadeIn と同様	スライドダウン
slideToggle	※書式は fadeIn と同様	スライドアップ、またはダウン

これらのメソッドはちょっと引数がいろいろあって、複雑にみえますが先ずは duration について説明します。
duration はそのメソッドのアニメーションの時間を指定します。指定する引数は数値型と文字列型があります。
数値型はミリ秒の値の指定で、文字列型は "slow" "fast" の値を指定します。（以下の様な感じです）

//数値型
object.show(200);
object.hide(400);

//文字列型
object.show("slow");	//show(600)の場合と同様
object.hide("fast");	//hide(200)の場合と同様

object.hide();			//hide(400)の場合と同様（デフォルト値）

//ここでの「object」はJQueryオブジェクト

それでは show, hide, toggle を使った例（メニューブロックの表示・非表示）を示します。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide/toggle</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function animateShow() {
    $("#menu").show(400);   	// 表示
}
//非表示処理
function animateHide() {
    $("#menu").hide("slow");	// 非表示
}
//表示・非表示の反転処理
function animateToggle() {
    $("#menu").toggle("fast");	// 表示・非表示
}
</script>
</head>
<body>
    <h2>test show/hide/toggle</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="animateShow();">show</button>
    <button onclick="animateHide();">hide</button>
    <button onclick="animateToggle();">toggle</button>
</body>
</html>

上の例は、メニューの様なものを表示する div で囲まれた領域を表示・非表示の処理を行います。表示する時には下方向にするすると下がってくる感じで表示され、隠す時には上方向にさっと上がる感じで消えていきます。

■easing の指定（変化速度）

easing はHTMLオブジェクトの変化の種別を指定します。 linear を指定すると直線的に変化し swing を指定すると最初ゆっくり動きだし最後の方は早く変化します。尚、省略した場合は swing になります。
jQuery UI Effect プラグインを導入することでその他のイーシングを用いることが可能な様です。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide easing</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShowSwing() {
    $("#menu").show("slow", "swing");		// swing 表示
}
function fncShowLinear() {
    $("#menu").show("slow", "linear");		// linear 表示
}
//非表示処理
function fncHideSwing() {
    $("#menu").hide("slow", "swing");   	// swing 非表示
}
function fncHideLinear() {
    $("#menu").hide("slow", "linear");   	// linear 非表示
}
</script>
</head>
<body>
    <h2>test show/hide easing</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShowSwing();">show swing</button>
    <button onclick="fncHideSwing();">hide swing</button>
    <br />
    <button onclick="fncShowLinear();">show linear</button>
    <button onclick="fncHideLinear();">hide linear</button>
</body>
</html>

■easing の指定（変化速度）jQuery UI Effect プラグインを導入

jQuery UI Effect プラグインを導入した例を以下に示します。

<html>
<head>
<meta charset="utf-8">
<title>test show/hide easing</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
//表示処理
function fncShowEaseInQuad() {
    $("#menu").show("slow", "easeInQuad");		// easeInQuad 表示
}
function fncShowEaseInElastic() {
    $("#menu").show("slow", "easeInElastic");	// easeInElastic 表示
}
//非表示処理
function fncHideEaseInOutQuad() {
    $("#menu").hide("slow", "easeInOutQuad");   // easeInOutQuad 非表示
}
function fncHideEaseInCubic() {
    $("#menu").hide("slow", "easeInCubic");   	// easeInCubic 非表示
}
</script>
</head>
<body>
    <h2>test show/hide easing</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncShowEaseInQuad();">show easeInQuad</button>
    <button onclick="fncHideEaseInOutQuad();">hide easeInOutQuad</button>
    <br />
    <button onclick="fncShowEaseInElastic();">show easeInElastic</button>
    <button onclick="fncHideEaseInCubic();">hide easeInCubic</button>
</body>
</html>

easing として指定できるパラメータは以下のものがあります。動作がどの様になるかは詳しく調べていませんが、後々調べたいと思います。

linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

■フェードイン・アウト処理（コールバック関数の例を含む）

フェードイン、フェードアウト処理の例を以下に示します。フェードインとは徐々に表示が現れて完全に見える様になる処理であり、フェードアウトとは徐々に表示が薄れていき最後に完全に見えなくなる処理です。
フェードイン、フェードアウトには処理時間が長くないと実感できませんので fadeIn, fadeOut, fadeToggle メソッドの第一引数には「2000」（2秒）と指定します。

また fadeToggle メソッドにはコールバック関数の指定をしています。コールバック関数はメソッドの処理が終わった時点で呼ばれます。今回の関数は div 領域が表示・非表示の状態をアラートしています。

<html>
<head>
<meta charset="utf-8">
<title>test fadeIn/fadeOut/fadeToggle</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//表示処理
function fncFadeIn() {
    $("#menu").fadeIn(2000, "swing");	//2秒でフェードイン
}
//非表示処理
function fncFadeOut() {
    $("#menu").fadeOut(2000, "linear");	//2秒でフェードアウト
}
//表示・非表示反転処理
function fncFadeToggle() {
    $("#menu").fadeToggle(2000, "linear", fncCallback);
}
//fadeToggle 処理後に呼ばれる関数宣言
function fncCallback() {
	if ($("#menu").css("display") == "block") {
		alert("表示");
	} else {
		alert("非表示");
	}
}
</script>
</head>
<body>
    <h2>test fadeIn/fadeOut/fadeToggle</h2>
    <div id="menu" style="display:none">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="fncFadeIn();">fadeIn swing</button>
    <button onclick="fncFadeOut();">fadeOut linear</button>
    <button onclick="fncFadeToggle();">fadeToggle linear</button>
</body>
</html>