2025/01/31
JQuery
備忘録です
liを順番に表示する方法です
HTML:
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LI 順番フェードアップ</title> <style> ul { list-style: none; padding: 0; } li { opacity: 0; /* 最初は非表示 */ transform: translateY(20px); /* 少し下にずらしておく */ transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* アニメーションの設定 */ margin-bottom: 10px; padding: 10px; background-color: #f0f0f0; border-radius: 5px; } li.fade-in { opacity: 1; transform: translateY(0); } </style> </head> <body> <ul id="myList"> <li>アイテム 1</li> <li>アイテム 2</li> <li>アイテム 3</li> <li>アイテム 4</li> <li>アイテム 5</li> </ul> <script> document.addEventListener('DOMContentLoaded', () => { const listItems = document.querySelectorAll('#myList li'); let delay = 0; // 各アイテムの遅延時間 listItems.forEach((item, index) => { setTimeout(() => { item.classList.add('fade-in'); }, delay); delay += 200; // 次のアイテムは200ms遅れて表示 }); }); </script> </body> </html>
解説:
HTML:
JavaScript:
DOMContentLoadedイベントリスナーを使って、DOMが完全に読み込まれた後にスクリプトを実行します。
document.querySelectorAll('#myList li')で、すべての
HTML:
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LI 順番フェードアップ (jQuery)</title> <style> ul { list-style: none; padding: 0; } li { opacity: 0; /* 最初は非表示 */ margin-bottom: 10px; padding: 10px; background-color: #f0f0f0; border-radius: 5px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <ul id="myList"> <li>アイテム 1</li> <li>アイテム 2</li> <li>アイテム 3</li> <li>アイテム 4</li> <li>アイテム 5</li> </ul> <script> $(document).ready(function() { $('#myList li').each(function(index) { $(this).delay(200 * index).animate({ opacity: 1, // transform: 'translateY(0)' はjQueryの.animate()では直接サポートされていません。 // CSSでtransitionを設定するか、jQuery UIなどを使う必要があります。 // ここではopacityのみをアニメーションさせます。 // もしtransformもアニメーションさせたい場合は、CSSのアニメーション(上記参照)を推奨します。 }, 500); // 500msかけてフェードイン }); }); </script> </body> </html>
解説:
HTML:
jQueryライブラリをCDNから読み込みます。
JavaScript:
$(document).ready()は、DOMが完全に読み込まれた後にコードを実行するためのjQueryのメソッドです。
$('#myList li').each(function(index) { ... });を使って、各
どちらを選ぶべきか?
JavaScript:
外部ライブラリを読み込む必要がないため、ページのロード時間が短縮され、パフォーマンスが向上する可能性があります。
より詳細なアニメーション制御が必要な場合や、特定のブラウザ互換性に対応する必要がある場合に適しています。
現代のWeb開発ではCSS transitionやanimationと組み合わせるのが一般的です。
jQuery:
コードが簡潔で、より少ない行数で同じ効果を実現できます。
古いブラウザでの互換性を気にしなくて良い場合や、既にプロジェクトでjQueryを使用している場合に便利です。
最近のWeb開発では、CSSのtransitionやanimationプロパティを使ってアニメーションを実装し、JavaScriptでクラスの付け外しを行うのが一般的です。これにより、アニメーションのパフォーマンスが向上し、JavaScriptのコードもシンプルになります。上記の「素のJavaScript」の例は、このアプローチを採用しています。
ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス
2025/01/31
JQuery
2025/01/01
神社
御朱印
相模原
2024/10/27
ブラウザ
カスタム投稿
Wordpress
2024/08/20
神社
御朱印
2024/07/06
神社
御朱印