Webサイトをもっと魅力的に！jQueryで要素の表示・非表示をアニメーションさせる
2024-04-02
この解説では、jQueryを使ってCSSプロパティ「display」を「none」または「block」に変更する方法について説明します。
方法
css()メソッドは、要素のCSSプロパティを取得・設定するために使用できます。
// 要素のdisplayプロパティを「none」に設定
$(element).css('display', 'none');
// 要素のdisplayプロパティを「block」に設定
$(element).css('display', 'block');
show()メソッドとhide()メソッドは、要素の表示・非表示を切り替えるために使用できます。
// 要素を表示
$(element).show();
// 要素を非表示
$(element).hide();
// 要素の表示状態を切り替え
$(element).toggle();
.is(':visible') と .is(':hidden') を使う
.is(':visible') は要素が表示されているかどうかを判断するために使用できます。.is(':hidden') は要素が非表示かどうかを判断するために使用できます。
// 要素が表示されているかどうか
$(element).is(':visible');
// 要素が非表示かどうか
$(element).is(':hidden');
以下のコードは、ボタンをクリックした時に要素の表示・非表示を切り替える例です。
<button id="button">Toggle</button>
<div id="element">要素</div>
$(document).ready(function() {
$('#button').click(function() {
$('#element').toggle();
});
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="button">Toggle</button>
<div id="element">要素</div>
<script>
$(document).ready(function() {
$('#button').click(function() {
$('#element').toggle();
});
});
</script>
</body>
</html>
このコードをブラウザで実行すると、ボタンをクリックするたびに要素が表示・非表示に切り替わります。
コード解説
<!DOCTYPE html>から</html>は、HTML文書であることを示します。<head>内には、文書に関するメタ情報を記述します。<meta charset="UTF-8">は、文字コードをUTF-8に指定します。<meta name="viewport" content="width=device-width, initial-scale=1.0">は、画面サイズに合わせて表示を調整します。<title>は、文書のタイトルを記述します。<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>は、jQueryライブラリを読み込みます。<body>内には、文書の内容を記述します。<h1>から</h1>は、見出し1を記述します。<button id="button">Toggle</button>は、「Toggle」というテキストが表示されたボタンを生成します。<div id="element">要素</div>は、「要素」というテキストが表示された要素を生成します。<script>から</script>内には、JavaScriptのコードを記述します。$(document).ready(function() {は、DOMContentLoadedイベントが発生した時に実行される処理を記述します。$('#button').click(function() {は、ボタンがクリックされた時に実行される処理を記述します。$('#element').toggle();は、要素の表示状態を切り替えます。
応用
上記のコードを応用することで、さまざまな要素の表示・非表示を切り替えることができます。
例えば、以下のコードは、マウスが要素の上に置かれた時に要素を表示し、マウスが要素から離れた時に要素を非表示にする例です。
$(document).ready(function() {
$('#element').hover(function() {
$(this).show();
}, function() {
$(this).hide();
});
});
このように、jQueryを使うと、CSSプロパティ「display」を簡単に変更することができます。
CSSプロパティ「display」を「none」または「block」に変更する他の方法
JavaScriptのstyleプロパティを使う
// 要素のdisplayプロパティを「none」に設定
element.style.display = 'none';
// 要素のdisplayプロパティを「block」に設定
element.style.display = 'block';
CSSの@mediaクエリを使う
画面サイズやデバイスによって要素の表示を切り替える場合は、CSSの@mediaクエリを使うことができます。
@media (max-width: 768px) {
#element {
display: none;
}
}
@media (min-width: 769px) {
#element {
display: block;
}
}
CSSフレームワークを使う
BootstrapやMaterializeなどのCSSフレームワークを使うと、要素の表示・非表示を切り替えるためのクラスやメソッドが提供されています。
<div class="d-none">要素</div>
// 要素を表示
$('.d-none').addClass('d-block');
// 要素を非表示
$('.d-block').removeClass('d-block').addClass('d-none');
- 簡単な方法で要素の表示・非表示を切り替えたい場合は、JavaScriptの
styleプロパティを使うのがおすすめです。 - CSSフレームワークを使っている場合は、フレームワーク提供的
jquery jquery-selectors
