LogoMark.png

jQuery/Sample

jQuery Sample

jQueryjQuery/SelectorjQuery/Method

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

CONTENTS


メニューのトグル

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

index.html


style.css


script.js




スムーズスクロール

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

index.html


style.css


script.js




基本アニメーション

画像のフェード

マウスのホバリングで画像がフェードするアニメーションのサンプル
CSSアニメーションでも実現できます。

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

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



要素の移動 → DEMO

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

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>Sample</title>
        <script src="jquery-xxxx.min.js"></script>	
        <script src="sample.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head> 
    <body >
        <div id="container">
            <input id="up" type="button" value="UP"/>
            <input id="down" type="button" value="DOWN"/>		
            <img id="box" src="images/sample.jpg">
        </div>	
    </body>
</html>

style.css | ページのビジュアル

#container {
    position: relative;
}

#box {
    position: absolute;
    left: 320px;
    top: 100px;
    width: 100px;
}

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

$( function(){
    $("#up").click( function(){
        $('#box').animate( { 'top': '100px' } , { 'duration': 1000 } );
    });
   $("#down").click( function(){
        $('#box').animate( { 'top': '500px' } , { 'duration': 1000 } );
    });
});




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




プラグインの活用

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

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

その他の事例

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

旧記事


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


要素のトグル表示 → 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-02-02 (日) 18:06:31