jQueryで遊んでみる その7

このシリーズだとアクセス数がめっきり減るけどめげないで続けてみる。

前回登場のanimateを使って、
ページ内リンクでの移動をアニメーションでやってみる。
これよくあるよね。


この程度ならプラグインを使わなくても
そこそこ簡単にjQueryのメソッドだけで実装出来るのだ。
自力で書いてみてこそオトコというものだ。


まずはサンプル ※詳しくはソース見て

サンプル1

これは、リンク先のターゲットと
クリックイベント用のクラスを手動で指定してます。


面倒なのでこんな風に変えて見た。

$(‘a[href*=#]’).click(function(){
として、#◎◎となっているリンクエレメントを
まとめてクリック判別出来るように記述

var targetTo = $(this.hash);
var targetOffset = targetTo.offset().top;
クリックされたリンク先のハッシュを抜き出して、移動先の位置を取得。


せっかくなので、これも前回登場のeasingプラグインを使って
派手な動きをしてみたサンプル。

サンプル2

シンプルだけど、なかなか面白い。

そろそろ本題(非同期通信）に入ってみたいと思いつつ、いつまで続くこのシリーズ。

jQueryで遊んでみるシリーズ