jQuery よく使うスニペット

個人的によく使うスニペットなど。

ページの先頭へスムーススクロール

<div class="pagetop"><img src="images/common/pagetop.png" /></div>
$(function(){
	$('.pagetop img').click(function () {
		$('body, html').animate({scrollTop:0}, 500, 'easeOutExpo');
			return false;
	});	
});

スクロールで表示させるといった特殊な機能はありません。
easingを読み込んでいない場合はeaseOutExpoをswing等に変更。

ページ内リンクへスムーススクロール

$('a[href^=#]').click(function() {
	var speed = 500;
	var href= $(this).attr('href');
	var target = $(href == "#" || href == "" ? 'html' : href);
	var position = target.offset().top;
	$('body,html').animate({scrollTop:position}, speed, 'easeOutExpo');
		return false;
});

easingを読み込んでいない場合はeaseOutExpoをswing等に変更。

ブロック要素全体にリンク

リンク(アンカータグ)を含むブロック要素全体にリンクをはります。

$('.selector').hover(function(){
        $(this).stop().fadeTo(300,0.5).css('cursor','pointer');
    },function(){
        $(this).stop().fadeTo(300,1);
    }).click(function(){
        window.location = $(this).find('a').attr('href');
        return false;
});

2行目でブロック要素の背景色を50%フェード、
カーソルをポインタに変更し、4行目で戻します。
6行目で内部のリンクを探し、クリックでページを移動します。

slideToggle

Q&Aでよく見かけるアコーディオンのdlを、ページ内リンクでも開くように変更しました。

$(function(){
	$('dd').css('display','none');
	$('dt').css('cursor','pointer').click(function(){
		$(this).next().slideToggle(500,'easeOutExpo');
	});
	$('#check').click(function(){
		$('html,body').animate({
			scrollTop: $('#receipt').offset().top}, {
			duration: 500,
			easing: "easeOutExpo",
			complete: function(){$('#receipt').next().slideDown(500,'easeOutExpo');}
		});
	});
});

■L5まで
ddを始め非表示にし、dtをクリック時にスライド表示させます。
jQuery.easing.jsを読み込んでいない場合には’easeOutExpo’を’linear’か’swing’に変更します。

■L6から
#checkのidを持つ要素をクリックすると、#receipt属性を持つdtへスムーススクロールし、その後ddをスライドします。

animateの例文

$(function(){
	$('#headerTab a').hover(
		function(){
			$(this).stop().animate({top : '0px'},'normal','easeOutBounce');
		},
		function(){
			$(this).stop().animate({top : '-5px'},'normal','swing');
		}
	);
});

予めhover後の長さの画像をtop:-5pxで絶対配置したものを、hoverで0pxまで戻します。
{top : ‘0px’}の部分はCSSでの指定になるので、たとえば画像置換のパディングで指定していた際にはtopをpaddingTopに変更。
‘normal’が入っている第二引数には’slow”normal”fast’や’ミリ秒指定’といった速度に関する記述を入れます。
‘3000’であれば3秒かけてアニメーションが行われます。
‘easeOutBounce’や’swing’が入っている第三引数にはeasing名を入れます。
jQuery単体だと’liner’か’swing’しか選択できませんが、別途jQuery Easing Pluginを導入すれば他にも多くの動きをつけることが可能です。
導入する際にはjQueryを読み込んでいるスクリプトタグより後に記述して下さい。

詳しい種類についてはjQuery Easing – jQuery 日本語リファレンスをご覧ください。
実際に動きを見ることができるので大変参考になります |’ω’|