jQueryを使ったいろいろなエフェクト　あれそれ

README.md

jQueryを使ったいろいろなエフェクト　あれそれ

クラス名「slide_page_handler」がクリックされた時に、 ページ全体が横にスライドするエフェクトを追加する。

$("body > *").wrapAll('<div id="slide_page_wrapper" style="width:100%"></div>');
$('.slide_page_handler').click(function(){
  var pass = $(this).attr("href");
  $('#slide_page_wrapper').animate({marginLeft: '-='+$(window).width()+'px'},300,function(){
    location.href = pass;
  });
  return false;
});

---

ヘッダーがあって、idを使ってページ移動をする際は位置ずれを起こすので、 それを解決し、スクロールを行うスクリプト ページ内に存在するすべてのidリンクに作用する

$(function () {
  var headerHight = 110; //ヘッダーの高さ
    $('a[href^=#]').click(function(){
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top - headerHight;
    $("html, body").animate({scrollTop:position}, 550, "swing");
    return false;
  });
});