概要

jQuery Puffyは、jQueryのプラグインとして動作します。
jQuery UIの中に「Puff」というエフェクトがありますが、これを使って少し新しい見た目を提供しようという、非常に簡単なプラグインです。

動作

下にある画像をクリックすると、jQuery Puffyの動作を確認できます。

使い方

まずjQuery本体と、jQuery UIが必須となります。
jQueryそのものの導入については、別途ドキュメントなどを参照してください。
jQuery UIは、最小であればcoreとeffect.puffがあれば動きます。

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

実行は、単純に対象エレメントのpuffyメソッドを呼び出すだけです。
例えば上の例は、クリックイベント内で次のように記述しています。

$('#sample').click(function(){
  $(this).puffy();
});

オプション

jQuery Puffyは、いくつかのオプションで動作を指定することができます。
オプションは多くのプラグイン同様に、メソッドの引数としてオブジェクトを渡してやることで指定できます。
指定可能なオプションは、次の通りです。

effect

もし基本エフェクトをpuffから変えたい場合があれば、指定します。ほぼ使うことは無いと思います。

options

エフェクトに対するオプションを指定します。

duration

エフェクトの実行速度を指定します。

callback

エフェクト実行後に呼び出される関数を指定します。

例えばエフェクトの速度をゆっくりにして、実行後に画像を入れ替える場合は次のようなコードを書きます。

var lookback=false;
$('#sample2').click(function(){
  $(this).puffy({
    duration: 1000,
    callback: function(){
      lookback=!lookback;
      if(lookback){
        $(this).attr('src', '/img/semooh_chira.gif');
      }else{
        $(this).attr('src', '/img/semooh_back.gif');
      }
    }
  })
})

[実行結果]

ライセンス

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