初心者向け！コピペで簡単に実装できる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);	
});

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

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

コーディング

2021.07.20

画面遷移時にページ全体をフェードさせる方法

ボタンを押して画面遷移をする時、フワッとフェードアウト→フェードインする動きが挟まっているとなんだか個性的で今っぽい感じがしますよね！今回は簡単にページ遷移のア…

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

最近の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");
    });
});

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

CSS

2020.11.21

【超簡単】jQueryとCSSでアコーディオンを実装する方法

アコーディオンは、LPの「よくある質問」などでよく利用されていますね。「Q 質問」をクリックすることで、「A答え」が開閉されるような動作です。アコーディオン…

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

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

//ページ内のスムーズスクロール
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;
  });
});