【jQuery】要素をおもいっきりガクブルさせる。

面白いプラグインを見つけたのでメモ。

■jrumble
http://jackrugile.com/jrumble/

使い方は簡単。

上記URLから飛んだ先の「Download」よりソースを拝借。

以下のようにjQueryの後に読み込む。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jrumble.1.3.js"></script>

あとはガクブルさせたい要素に対して以下のようにメソッドをバインドしてやればよい。

// 要素に対してガクブルライブラリをバインドする。
$('#hoge').jrumble();

// ガクブル開始(スタート)
$('#hoge').trigger('startRumble');

// ガクブル終了(ストップ)
$('#hoge').trigger('stopRumble');

.jrumble()に対して引数を渡してやることで、ガクブルを自由自在に操作することが可能。
細かいパラメータやセッティング方法に関しては公式ドキュメントを参照されたし。