JavaScript JQuery CSSの値を指定してアニメーションを実行（animate）

2021/09/29

以下の記事では HTMLオブジェクト要素を表示・非表示するために JQuery メソッドの show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle を使いました。
（⇒JavaScript JQuery Effects関連のメソッドの使い方（show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle））
今回は要素に対して最終的な CSS の値を指定して、それになるまでの動きをさせる JQuery メソッドの animate ついて説明します。

■animate メソッドの書式

JQuery メソッドの animate の書式は以下の通りです。

//animateの書式
.animate( cssproperties [, duration] [, easing] [, complete] )
.animate( cssproperties, options ) 1.0追加 

// cssproperties : CSSプロパティオブジェクト（複数指定可）
// [duration]    : フェードするアニメーション時間を指定(数値型と文字列型)
//                 ・数値型はミリ秒の値
//                 ・文字列型は "slow"(600ミリ秒) "fast"(200ミリ秒) の値
// [easing]      : アニメーションの変化の種類を指定（"linear","swing"）
//                 ・"linear" を指定すると直線的に変化
//                 ・"swing"  を指定すると最初ゆっくり動きだし最後の方は早く変化
// [callback]    : アニメーション完了後に実行したい関数を指定
// options       : duration等をオブジェクトで指定
//

■animate メソッドの簡単な例

それでは animate の簡単な例を以下に示します。この例は div で囲まれた要素の透明度である opacity を通常から「0.5」へ、さらに「0.5」から通常にする処理です。

<html>
<head>
<meta charset="utf-8">
<title>test animate</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//透明度0.5処理
function animateOpacityHalf() {
    $("#menu").animate({
			opacity: 0.5	// 透明度0.5へ
	  	}, 1000
	);
}
//透明度1.0処理
function animateOpacityNormal() {
    $("#menu").animate({
			opacity: 1.0	// 透明度1.0へ
	  	}, 1000
	);
}
</script>
</head>
<body>
    <h2>test animate</h2>
    <div id="menu">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="animateOpacityHalf();">OpacityHalf</button>
    <button onclick="animateOpacityNormal();">OpacityNormal</button>
</body>
</html>

■CSS プロパティを複数設定する

上記の簡単な例では opacity のみを指定しましたが、以下の例では marginLeft marginTop の2個を追加しました。

CSS プロパティで指定できるのは値として数値であるものです。例では marginLeft にはピクセル値を設定していますが、これは数値として判断できるためです。なお、単位として % や em も使える様です。

<html>
<head>
<meta charset="utf-8">
<title>test animate</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//透明度0.5処理
function animateOpacityHalf() {
    $("#menu").animate({
			opacity: 0.5,		// 透明度0.5へ
			marginLeft: "100px",// 左マージン100px
			marginTop: "100px"	// 上マージン100px
	  	}, 1000
	);
}
//透明度1.0処理
function animateOpacityNormal() {
    $("#menu").animate({
			opacity: 1.0,		// 透明度1.0へ
			marginLeft: "0px",	// 左マージン0px
			marginTop: "0px"  	// 上マージン0px
	  	}, 1000
	);
}
</script>
</head>
<body>
    <h2>test animate</h2>
    <div id="menu">
      <ul>
        <li>menu-1</li>
        <li>menu-2</li>
        <li>menu-3</li>
      </ul>
	</div>
    <br />
    <button onclick="animateOpacityHalf();">OpacityHalf</button>
    <button onclick="animateOpacityNormal();">OpacityNormal</button>
</body>
</html>

上の例は　div で囲まれた領域が「OpacityHalf」ボタンでは右下に移動し、「OpacityNormal」ボタンでは左上に戻った様に表示されます。

VB.NET-TIPS などプログラミングについて

■このページの内容

■animate メソッドの書式

■animate メソッドの簡単な例

■CSS プロパティを複数設定する

関連する記事

コメント