記事の内容
概要
slideup-slidedownメソッドは、選択した要素のスライド表示にを操るjQueryメソッドです。
slideup / slidedown
記法
$(selector).slideup(speed);
$(selector).slidedown(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>slideUpとslideDownメソッドについて</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<button id="slide_down_button">表示する</button>
<button id="slide_up_button">非表示にする</button>
<div id="slide_content">これはスライドダウンとスライドアップで制御されるコンテンツです。</div>
<!-- CDN取得 -->
<script src="CDNのURL"></script>
<script src="./main.js"></script>
</body>
</html>// ページの読み込みが完了
$(function() {
// 初期状態で非表示
$('#slide_content').hide();
// ボタンをクリックするとスライドダウン
$('#slide_down_button').click(function() {
$('#slide_content').slideDown('slow');
});
// ボタンをクリックするとスライドアップ
$('#slide_up_button').click(function() {
$('#slide_content').slideUp('slow');
});
});#slide_content {
display: none; /* 初期状態で非表示 */
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}出力結果
これはスライドダウンとスライドアップで制御されるコンテンツです。
コールバック処理を含む
slideup / slidedown
記法
$(selector).slideup(speed, callback);
$(selector).slidedown(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>slideUpとslideDownメソッドについて</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<button id="slide_down_btn_2">表示する</button>
<button id="slide_up_btn_2">非表示にする</button>
<div id="slide_content_2">
これはスライドダウンとスライドアップで制御されるコンテンツです。
</div>
<!-- CDN取得 -->
<script src="CDNのURL"></script>
<script src="./main.js"></script>
</body>
</html>// ページの読み込みが完了
$(function () {
// 初期状態で非表示
$("#slide_content_2").hide();
// ボタンをクリックするとスライドダウン
$("#slide_down_btn_2").on("click", function () {
// 表示かつアニメーション中でない場合にのみスライドダウンを実行
if (
$("#slide_content_2").is(":hidden") &&
!$("#slide_content_2").is(":animated")
) {
$("#slide_content_2").slideDown("slow", function () {
// 表示された後のコールバック関数
alert("テキストが表示になりました。");
});
}
});
// ボタンをクリックするとスライドアップ
$("#slide_up_btn_2").click(function () {
$("#slide_content_2").slideUp("slow");
});
});#slide_content_2 {
display: none; /* 初期状態で非表示 */
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}出力結果
これはスライドダウンとスライドアップで制御されるコンテンツです。
