概要

jQuery Effect Spectrumは、jQueryのプラグインあるいはjQuery.Effectの一種として動作します。
ある要素から他の要素（もしくは指定の場所）へ、四角形が残像を残して移動します。
Ajaxなどで変化させた箇所を強調したり、説明の中で指し示しているものを明示的にしたりするのに役立つと思います。

動作

このプラグインは nao58 が作りました。

他のサンプル [1] [2]

使い方

まずjQuery本体が必要です。
jQueryそのものの導入については、別途ドキュメントなどを参照してください。

jQuery Effect Spectrumは、本家プラグインページのリポジトリか、githubから入手してください。

実行は、開始点となる要素に対してspectrumメソッドを呼び出します。
その際、必ず目的地が必須となることに注意してください。
目的地は、destで対象要素を指定するか、destPosで絶対位置を指定するかのいずれかになります。
例えば前述のデモは、spanタグを開始点に、自己紹介のdivを目的地として指定しています。

$('#sample').click(function(){
  $(this).spectrum({dest: $('#sidebar div:first')});
});

また、このプラグインはjQuery.Effectとして使うことも出来ます。その場合はjQuery UIが必要となります。

  $('#sample').click(function(){
    $(this).effect('spectrum', {dest: $('#sidebar div:first')}, 500);
  });

単純な呼び出しであれば直接のメソッド呼び出しが手軽ですが、Effectとして用いることで他のプラグインとの連携も容易になります。

オプション

dest

目的地となる要素を指定します

destPost

目的地となる位置を絶対座標で指定します。この値は、left,top,width,heightを持つオブジェクトになります。

easing

エフェクトの速度変化を調節するeasing名を指定します。（参照）

spClass

残像効果にあてるクラス名を指定します。これにより、赤い枠線や点線などを実装できます。

spCss

spClass同様に、残像効果の見た目を変更します。こちらはjQueryのcssオブジェクト書式で記述します。

spDelay

残像が余韻として残る時間を指定します。

autoScroll

目的地がページの外にあった場合、自動的にスクロールするかを指定します。初期値は true です。

duration

エフェクトの実行速度を指定します。jQuery.Effectとして使う場合は、effect関数への引数になるためこちらは使用できません。

callback

エフェクト完了後に実行する関数を指定します。jQuery.Effectとして使う場合は、effect関数への引数になるためこちらは使用できません。

ここで、オプションを用いた例をもうひとつ挙げておきます。

$('#sample2').click(function(){
  $(this).spectrum({
    dest: $('#s'),
    easing: 'easeOutQuint',
    spDelay: 1000,
    duration: 2000,
    callback: function(){
      $('#s').val('jQuery').focus();
    }
  });
});

このサイト内で例えば「jQuery」と検索したい場合、検索窓にテキスト入力してからEnterを押してください。

ライセンス

コードにも記載していますが、MITとGPLのデュアルライセンスとします。
全く自由に使っていただいて構いませんが、どこかで利用したり紹介していただいた際は、ご一報いただけると喜ぶと思います。
また、ダウンロードパッケージに同梱されている画像は全てYuuki MATSUKIさんによるものです。
こちらに関しては、商用利用はご遠慮いただけるようお願いします。