LogoMark.png

jQuery/Sample

jQuery Sample

jQueryjQuery/SelectorjQuery/Method

以下に示す事例は、 jQueryの使い方を理解するためのものです。事例によっては、CSS3アニメーションで実装する方が簡単な場合もあるので、実際に活用する際はCSSアニメーションと比較検討してください。

CONTENTS




基本サンプル

テキスト、HTML、CSS を動的に変更する基本的な事例です。

index.html


script.js




エフェクト・アニメーション

jQuery のエフェクト・アニメーションを確認するための簡単なサンプルです。マウスのホバリングで画像がフェードするエフェクトと、ボタンクリックで要素を動かすアニメーションを実装しています。
この種の「動き」は、CSSアニメーションでも実現できます。

このサンプルでは、images, css, js の3つのフォルダをつくって、それぞれファイルを整理しています。

index.html


script.js


記法や関数の詳細については、以下のような検索でご確認下さい。

補足1

プラグイン hoverplus を利用すると、「マウスのホバー時に画像が拡大する」演出ができます。

補足2:透明度・サイズ → DEMO

文字が上から少しずつ表示されるように見えるサンプルです。ページ読み込みと同時に少しづつ表示されます。詳細省略して要点のみ書くと・・

HTML: じわっと表示したい部分にIDを設定

<div id="message">
 :
 ここに文章
 :
</div>

CSS:当該部分の初期設定として、不透明度:0、高さ:0

#message{
    opacity: 0;
    height: 0px;
}

JavaScript:6秒かけて、不透明に、同時に高さを500pxまで

$( function(){
   $("#message").animate( { opacity: '1', height : '500px' }, 6000 );
});




メニューのトグル

クリックで開閉するメニューのサンプルです。

index.html


style.css


script.js




スムーズスクロール

animateを使って、ページ内の縦スクロールをスムーズにする事例です。

index.html


style.css


script.js




プラグインの活用

項目が増えてきたので、ページを分けました。

よく話題になるプラグイン

その他の事例

ここまでの導入事例が理解できた方であれば、以下のようなプラグインの導入もむずかしくないと思います。挑戦してみてください。

旧記事


新しいサンプルを追加したため、以下の内容は古くなっています。


要素のトグル表示 → DEMO
ボタンをクリックする度に、表示/非表示を切り替えるサンプルです。 

index.html | ページの文書構造

<!DOCTYPE html>
<html lang="ja">
    <head>
         <meta charset="UTF-8" />
         <title>Sample</title>
         <script src="jquery-xxxxxx.js"></script>
         <script src="sample.js"></script>
         <link rel="stylesheet" type="text/css" href="style.css">
    </head> 
    <body >
         <h1>Sample for jQuery</h1>		
         <nav>
              <ul id="button">
                   <li>MENU</li>
              </ul>
              <ul id="lists">
                   <li><a href="#">home</a></li>
                   <li><a href="#">gallery</a></li>
                   <li><a href="#">profile</a></li>
                   <li><a href="#">links</a></li>
              </ul>
         </nav> 
         <article>
              Sample Page for Toggle Switch"
         </article>
    </body>
</html>

sample.js | ページのふるまい

$( function(){
      $("#lists").hide();      //lists部分の初期状態(隠す)
      $("#button").click( function () { 
            $("#lists").slideToggle(); 
     });
});


参考:同様のトグル部分が複数ある場合
同様のトグルグループが複数ある場合(例えば、メニューが階層化されている場合など)、ボタンとリストをクラス扱いにして、さらにトグル要素の把握の仕方を以下のように工夫すれば、同じ行数のプログラムで問題が解決します。

html 以下のようなブロックがページ内に複数ある場合

<nav>
  <ul class="button">
    <li><a href="#">WORKS</a></li>
  </ul>
  <ul class="lists">
    <li><a href="#">photo</a></li>
    <li><a href="#">illust</a></li>
    <li><a href="#">package</a></li>
  </ul>
</nav>

 :  以下同様

JS ドキュメンドノードを辿ってターゲットに指示を出します

$( function(){
  $(".lists").hide();
  $(".button").click(function () {
    $(this.parentNode.children[1]).slideToggle();
   });
});

4行目は、自分( #button )の親( nav )から見て2番目の子要素、つまり自分の弟にあたる要素( #lists )をトグルスライドすることを意味しています。



PAGES

GUIDE

DATA

Last-modified: 2020-06-18 (木) 10:35:52