【jquery】簡単に実装できるスクリプト4選

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

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

httpで始まるリンクが全て別窓で開くようになります。
リンク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;
  });
});

ぜひご活用ください。