jquery.smoothswap.js2011-02-18

≫Download

ぬるっと動いて、2つのパネルの位置が入れ替わる jQuery プラグインです。

デモ

使い方

まず始めに、上部の Download リンクよりダウンロードしたプラグインを、jQuery 本体と一緒に読み込んで下さい。
≪HTML≫
入れ替えたい単位をパネルとしてパネル用のクラス "smoothswap-panel" を指定します。
そのパネルの中で、上に動かすための要素のクラス"smoothswap-up" と、下に動かすための要素のクラス "smoothswap-down" を指定します。

<div id="smoothswap" style="width:400px;padding:10px;border: solid 1px #99f;background-color:#eef;">
<div class="smoothswap-panel" style="margin:10px;padding:10px;border:solid 1px #999;background-color:#fff;">
  <div style="text-align:right"><button class="smoothswap-up">▲</button><button class="smoothswap-down">▼</button></div>
  <div>
    1つめのパネル。<br />
    1つめのパネル。<br />
    1つめのパネル。<br />
    1つめのパネル。<br />
  </div>
</div>
<div class="smoothswap-panel" style="margin:10px;padding:10px;border:solid 1px #999;background-color:#fff;">
  <div style="text-align:right"><button class="smoothswap-up">▲</button><button class="smoothswap-down">▼</button></div>
  <div>
    2つめのパネル。<br />
  </div>
</div>
<div class="smoothswap-panel" style="margin:10px;padding:10px;border:solid 1px #999;background-color:#fff;">
  <div style="text-align:right"><button class="smoothswap-up">▲</button><button class="smoothswap-down">▼</button></div>
  <div>
    3つめのパネル。<br />
    3つめのパネル。<br />
    3つめのパネル。<br />
    3つめのパネル。<br />
    3つめのパネル。<br />
    3つめのパネル。<br />
    3つめのパネル。<br />
    3つめのパネル。<br />
  </div>
</div>
</div>

≪JavaScript≫
複数のパネルを保持した外側の要素を jQuery オブジェクト化して smoothswap メソッドを呼び出します。

$(function(){
  $('#smoothswap').smoothswap();
});

あとは大体プラグインが上手い事やってくれるはずです。
また、プラグインの起動時にいくつかのオプションを指定する事が出来ます。

オプション名	説明	デフォルト値
panel	パネルを指定するセレクタです。デフォルトから変更したい場合に指定して下さい。	'.smoothswap-panel'
up	上移動の要素を指定するセレクタです。デフォルトから変更したい場合に指定して下さい。	'.smoothswap-up'
down	下移動の要素を指定するセレクタです。デフォルトから変更したい場合に指定して下さい。	'.smoothswap-down'
opacity	移動中の要素の透明度です。	'0.6'
duration	移動の速度です。jQuery の animate メソッドで使用できる値が全て使用できます。	'normal'
marginHeight	パネルとパネルの間のマージンを px 値で指定します。 未定義の場合はプラグインが大体いい感じになるように計算しますが、デザインの仕方によっては大きくずれる可能性があるので、移動後の位置がずれてしまう場合は調整して下さい。	未定義
onswapped	スワップが完了したタイミングで実行したい関数オブジェクトを渡します。 パネルの入れ替えが完了すると、onswapped(base, first, second); の形で呼び出されます。 引数はいずれも jQuery オブジェクトで、base:プラグインを実行した要素、first:移動前に上にあったパネル、second:移動前に下にあったパネルになります。	未定義

透明度を下げて、移動のスピードを速くして、マージンを 10 px に調整する例。
入れ替えが完了したら "done!" と表示する。

$(function(){
  $('#smoothswap').smoothswap({
    opacity: '0.2',
    duration: 'fast',
    marginHeight: 10,
    onswapped: function(base,first,second){alert('done!');}
  });
});

ライセンス

ライセンスは MIT License (日本版 wikipedia の項) で公開します。