記事の内容
概要
fadein-fadeoutメソッドは、選択した要素の表示を操るjQueryメソッドです。
※透明度の増加/減少
fadein / fadeout
記法
$(selector).fadeIn(speed);
$(selector).fadeOut(speed);
============================
selector : 対象の要素を指定するセレクター
speed : アニメーションの速度（省略可能。"slow", "fast", またはミリ秒単位の数値）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fadeInとfadeOutメソッドについて</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<button id="fade_in_button">表示する</button>
<button id="fade_out_button">非表示にする</button>
<div id="fade_content">これはフェードインとフェードアウトで制御されるコンテンツです。</div>
<!-- CDN取得 -->
<script src="CDNのURL"></script>
<script src="./main.js"></script>
</body>
</html>// ページの読み込みが完了
$(function() {
// 初期状態で非表示
$('#fade_content').hide();
// ボタンをクリックするとフェードイン
$('#fade_in_button').click(function() {
$('#fade_content').fadeIn('slow');
});
// ボタンをクリックするとフェードアウト
$('#fade_out_button').click(function() {
$('#fade_content').fadeOut('slow');
});
});#fade_content {
display: none; /* 初期状態で非表示 */
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}出力結果
これはフェードインとフェードアウトで制御されるコンテンツです。
コールバック処理を含む
fadein / fadeout
記法
$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
============================
selector : 対象の要素を指定するセレクター
speed : アニメーションの速度（省略可能。"slow", "fast", またはミリ秒単位の数値）
callback : アニメーション完了後に実行されるオプションの関数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fadeInとfadeOutメソッドについて</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<button id="fade_in_button_2">表示する</button>
<button id="fade_out_button_2">非表示にする</button>
<div id="fade_content_2">
これはフェードインとフェードアウトで制御されるコンテンツです。
</div>
<!-- CDN取得 -->
<script src="CDNのURL"></script>
<script src="./main.js"></script>
</body>
</html>// ページの読み込みが完了
$(function () {
// 初期状態で非表示
$("#fade_content_2").hide();
// ボタンをクリックするとフェードイン
$("#fade_in_button_2").on("click", function () {
// fade_content_2非表示時のみ & 連続クリック防止 fadeInメソッド処理を実行
if (
$("#fade_content_2").is(":hidden") &&
!$("#fade_content_2").is(":animated")
) {
$("#fade_content_2").fadeIn("slow", function () {
// 表示にされた後のコールバック関数
alert("テキストが表示になりました。");
});
}
});
// ボタンをクリックするとフェードアウト
$('#fade_out_button_2').click(function() {
$('#fade_content_2').fadeOut('slow');
});
});#fade_content_2 {
display: none; /* 初期状態で非表示 */
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}出力結果
これはフェードインとフェードアウトで制御されるコンテンツです。
