JavaScript

2021.11.24

初心者向け!コピペで簡単に実装できるjQuery4選

jQueryを使うと、WEBサイトにアニメーション等動きのあるデザインを実装できたり、要素の動的変更やHTMLを操作できたりととても便利です。
今回は、よく使う&簡単に実装できるjQueryスクリプトをいくつかご紹介いたします。
jQuery本体の読み込みも忘れずに!

「http」で始まるリンクを別窓で開く

下記の記述をすると、「http」で始まるリンクが全て別窓で開くようになります。
(「http」で入れることで、「http://〜」「https://」のどちらのリンクでも対応することができます!)
リンク1つ1つにtarget="_blank"を記述しなくてもよくなるので便利です。

//httpで始まるリンクを別窓で開く
$(function(){
   $('a[href^=http]').attr("target", "_blank");
});

特定のclass名を付けて囲んだ要素を〇秒かけて〇秒後にフェードアウトさせる

フェードアウトすると、要素があった場所は無くなります。(display:none)
ロゴなどのアニメーション表示後にサイトを表示させたい時にも使えます。

//class="movement"で囲んだ要素を2秒かけて8秒後にフェードアウトさせる
$(function(){
setTimeout(function() {
    $('.movement').fadeOut(2000);
}, 8000);	
});

フェードの動きを応用することで、コンテンツ単体だけでなく、ページ全体をフェードイン/フェードアウトをさせることも可能です!

ページ全体をフェードインさせる方法

アコーディオンメニューの実装

最近のWebサイトは、クリックすると隠れていたメニューやコンテンツが表示される機能が実装されていることが多いです。

HTML

<!-- アコーディオンメニューの実装 -->
<dl class="menu">
 	<dt>ここをクリックするとコンテンツが開く</dt>
</dl>
<dl class="menu">
 	<dd>出てくるコンテンツ01</dd>
</dl>
<dl class="menu">
 	<dd>出てくるコンテンツ02</dd>
</dl>

jquery

//アコーディオンメニューの実装
jQuery(function(){
    jQuery(".menu dd").hide();
    jQuery(".menu dt").on("click", function() {
        jQuery(this).next().slideToggle("normal");
    });
});

アコーディオンのより詳しい記事はこちら

ページ内のスムーズスクロール

ページ内を移動する時、スムーズなスクロールの動きをつけたほうが「同じページの中を移動したんだな」と認識しやすいので、実装するとより見やすいページになると思います。
アンカーリンク(ページ内リンク)が多いサイトを作る場合や、ページ上部へ戻れるボタンを作成する場合には入れてあると良いですね!

//ページ内のスムーズスクロール
jQuery(function($){
  var headerHight = 0;
  // a:not の部分にはスクロールさせたくないID名を記載
  jQuery('a[href^="#"]' + 'a:not([href *= " "])').click(function() {
    // スクロールの速度
    var speed = 1500; // ミリ秒
    var href= jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top-headerHight;// ※ -headerHightでズレの処理
    jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

まとめ

どれも簡単なスクリプトですが、サイトにひと工夫加えることができます!
ぜひご活用ください!

おすすめ記事はこちら

この記事をシェアする

関連記事

  • 2021.04.06

    【jQuery】全画面表示のナビゲーションメニューを実装する

    JavaScript

  • 2021.04.05

    【簡単レスポンシブ対応】jQueryのみでPC/SP(スマートフォン)の画像を切り替える方法

    JavaScript

  • 2021.03.30

    【jQuery】text()メソッドでHTML要素内のテキストを操作する

    HTML5

    JavaScript

おすすめ記事

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.06.09

    この世界はコードでできている#1

    コーディング

    制作

×