【jQuery】ページがすっ飛んだ！画面遷移にスライド効果を追加する方法

リンクをクリックして次のページを開く際にスライド効果を追加するテクニックです。

WEBサイトでリンクの度にスライド処理が行われると、個人的には邪魔で仕方が無いと思うのですが、今回の依頼は「iPadで見る店内カタログをHTMLで制作する」という内容で、お客様も「スライドじゃなきゃヤダヤダ」とのことでしたので、スライドした方がiPadっぽくて良いかもと思い実装しました。

HTML

jQueryが必要ですので、予め読み込んでおきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

リンクにidを追加します。

<a href="" id="slide_button">スライドするとよ</a>

Javascript

(function($){
$.fn.pageswitch = function(options) {
	var defaults = {
		url:'default',
		event:'click',
		target:'body',
		properties:{opacity:0},	
		options:{duration:750,easing:"linear",queue:true}
	};
	var options = $.extend(defaults, options);
	return this.each(function() {;
		if(options.url == 'default') var target = $(this).attr('href');
		else var target = options.url;			
		$(this).bind(options.event, function() {	
			options.options.complete = function() { window.location.replace(target) }; 
			$(options.target).animate(options.properties, options.options);	   	
			return false;		
		});
	});
};
})(jQuery);
$(document).ready(function() {
	$('a.slide_button').pageswitch({
		properties:{marginLeft:-$('body').width(),opacity:0},
		options:{duration:1000}
	});
});

http://code.google.com/p/jquery-pageswitch-plugin/