jQueryで遊んでみる その7

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

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


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


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

サンプル1



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


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

$(‘a[href*=#]’).click(function(){

として、#◎◎となっているリンクエレメントを
まとめてクリック判別出来るように記述

var targetTo = $(this.hash);
var targetOffset = targetTo.offset().top;


クリックされたリンク先のハッシュを抜き出して、移動先の位置を取得。


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

サンプル2



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

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

jQueryで遊んでみるシリーズ




Related Posts

4 Comments

  • Kawa

    5月 th, 2010 11:20 PM

    これは面白いですね。どこかで使いたい。

  • かむ

    5月 th, 2010 7:15 PM

    Kawaさん
    なんか使えそうだよね。

  • OKAMURA

    5月 rd, 2010 11:15 PM

    > このシリーズだとアクセス数がめっきり減るけど
    あはw うちと逆ですねえ。うちはこう言う記事だとアクセスが増えるんですよねえ。我ながらいまいち面白くないですw

    しかし、かむさんもとうとう jQuery の甘い誘いに絡めとられてしまったようですね。

  • かむ

    5月 th, 2010 11:33 PM

    OKAMURAさん
    いわゆる、読者層の違いってやつですかね?(;・∀・)

    しばらくprototypeでやってましたが、どうもjQueryが勢いがあるので
    ネタ切れついでにテストしてます。

    ネタ切れでやってる感ありありなので
    アクセスも減るんでしょうね〜 ><