jQuery scrollTo

タブ切替えのアニメーション効果

タブ切替え実装の時、切替え方法として次の３パターンから選ぶ事が多いです。

display属性操作の瞬時切替え
opacity属性操作のフェードイン・アウト
スクロールによるコンテンツのスライド

jQueryを利用する場合１、２番目に関しては簡単に実装できますが、
３つ目に関してはそこそこのロジックを実装する必要があります。そんな場合、次のplug-in を利用する事で簡単に対応できる。

$(function(){
    $('タブ要素抽出セレクタ').each(function(){
        $(this).click(function(){
            var _left = $(this).attr('pos') || '1';
            $('スクロールエリアのセレクタ').scrollTo( (_left-1)*スクロール幅, スクロール時間 , {queue:true} );
        });
    });
})

こんな感じで使う。

タブにはpos属性をつけておいて、スクロール領域内に表示する要素のスクロール制御に利用。
posが2なら、(2-1)×スクロール領域幅の値分スクロールする感じ。
スクロール領域はoverflow:hiddenとして、内部のコンテンツはposition:absoluteで表示領域分位置をずらす感じで。

以上、メモ