LogoMark.png

jQuery/Sample のバックアップ(No.1)

jQuery Sample

jQuery｜jQuery/Selector｜jQuery/Method

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

↑

CONTENTS




↑

基本サンプル

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

↑

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

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

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

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

↑

補足１

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

↑

補足２：透明度・サイズ　→　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 );
});




↑

メニューのトグル

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




↑

スムーズスクロール

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

↑

構築方法




↑

プラグインの活用

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

↑

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

↑

その他の事例

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

旧記事

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


要素のトグル表示　→　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();
   });
});

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