要素を小刻みに振動（wiggle）させる jqueryプラグイン3選-その2「ClassyWiggle」

【この記事を読むのに必要な時間は約 14 分です。】

3回にわたり画像などの要素を小刻みに振動（Wiggle）させるjqueryプラグインを紹介している。「jQuery Vibrate」、「ClassyWiggle」（旧「jQuery Wiggle plugin」）、「jRumble」の3つ。2回目として、多くのjqueryプラグインを提供しているMarius Stanciuさんの作成された「ClassyWiggle」を紹介する。

1 ClassyWiggleのダウンロードとサーバーへのアップロード
- 1.1 注意事項
- 1.2 ホームページ
2 設定方法とデモ
3 デモ表示

ClassyWiggleのダウンロードとサーバーへのアップロード

注意事項

要素を振動（wiggle）させるプラグインは名前も似たようなものが非常に多い。似た名前の違うプラグインだと動作のさせ方が違ったりするので注意して欲しい。「ClassyWiggle」はその点、間違えることはないと思うが、旧名は「jquery wiggle plugin」。検索すると利用方法が一番解説されているようだ。ただ、名前の変更とともに若干設定も変わったようだ。

ホームページ

こちらがClassyWiggleの作者のページ。「作者の提供しているjqueryプラグインの紹介ページからダウンロードできる。
ダウンロードファイル：jquery-classywiggle.zip
必要ファイルは解凍したフォルダの中にあるjquery.classywiggle.min.jsファイルだけなので、これをサーバーにアップロードする。
必要ファイル：jquery.classywiggle.min.js

設定方法とデモ

ClassyWiggleの基本動作とオプション

デフォルトの$('要素').ClassyWiggle()で振動している状態。
オプションとして、トリガー（trigger）に「click」、「mouseover」、「hover」が設定できる。その他振動速度、振動の幅、振動回数等が設定できる。
振動開始や振動終了のアクションも細かく設定できるようだが、私には難しかったので、割愛する。

jQuery本体とjsファイルの呼び出しの設定

jQuery本体とClassyWiggleのjsファイルを呼び出す設定をする。
ヘッダー部分（<head>と</head>の間）に以下のように記載する。なお、jQuery本体はGoogle AJX APIのホスティングを利用している。

<!-- jquery本体 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /jquery本体 -->

<!-- ClassyWiggle -->
<script type="text/javascript" src="http://（アップロード先URLを記載）/jquery.classywiggle.min.js"></script>
<!-- /ClassyWiggle -->

動作設定のためのjsの設定

上記に続けて、ヘッダー部分（<head>と</head>の間）に以下のように記載する。
なお、クラス指定は、自分のわかりやすいもので良い。もちろんID指定（例#wiggle1）でも動作する。今回は、デモ用に「.wiggle(連番)」としている。

<!-- setting -->
<script type="text/javascript">
$(document).ready(function() {
    $('.wiggle1').ClassyWiggle();                            //デモ1
    $('.wiggle2').ClassyWiggle('start', {                    //デモ2左
          wiggleDegrees: ['1','2','1','0','-1','-2','-1','0'],  //回転サイクル デフォルト['2','4','2','0','-2','-4','-2','0']
          delay: 32,                                            //振動速度 デフォルト35
          limit: 20,                                            //30回振動する デフォルトnull
    });
    $('.wiggle3').ClassyWiggle('start', {                    //デモ2右
          wiggleDegrees: ['4','8','4','0','-4','-8','-4','0'],  //回転サイクル
          delay: 64,                                            //振動速度64
          limit: 10,                                            //20回振動する
    });
    $('.wiggle4').click(function() {                         //デモ3左クリックでオンオフtrigger(click)
          if ($(this).ClassyWiggle('isWiggling')) {
          $(this).ClassyWiggle('stop');
          }
          else {
          $(this).ClassyWiggle('start');
          }
   });
   $('.wiggle5').mouseover(function() {                      //デモ3右マウスオーバーでオンオフtrigger(mouseover)
          if ($(this).ClassyWiggle('isWiggling')) {
          $(this).ClassyWiggle('stop');
          }
          else {
          $(this).ClassyWiggle('start');
          }
   });
   $('.wiggle6').hover(function() {                          //デモ4左マウスがhoverしている間オンtrigger(hover)
          if ($(this).ClassyWiggle('isWiggling')) {
          $(this).ClassyWiggle('stop');
          }
          else {
          $(this).ClassyWiggle('start');
          }
   });
   $('.wiggle7').hover(function() {                          //デモ4右マウスがhoverしている間オンtrigger(hover)
          if ($(this).ClassyWiggle('isWiggling')) {
          $(this).ClassyWiggle('stop');
          }
          else {
          $(this).ClassyWiggle('start', {
              wiggleDegrees: ['4','8','4','0','-4','-8','-4','0'],  //回転サイクル
              delay: 64,                                            //振動速度64             
              });
          }
   });
   $('#start').click(function(){                        //デモ5スタート/ストップボタン
         $('.wiggle8').ClassyWiggle('start');
   });
   $('#stop').click(function(){
         $('.wiggle8').ClassyWiggle('stop');
   });
});
</script>
<!-- /setting -->

なお、デモ全ての動作を記載している。ひとつのデモだけの場合は、次のように切り取って記載する。例として上のハイライトした「デモ３左」だけにする場合。

<!-- setting -->
<script type="text/javascript">
$(document).ready(function() {
$('.wiggle4').click(function() {                         //デモ3左クリックでオンオフtrigger(click)
          if ($(this).ClassyWiggle('isWiggling')) {
          $(this).ClassyWiggle('stop');
          }
          else {
          $(this).ClassyWiggle('start');
          }
   });
});
</script>
<!-- /setting -->

デモ用画像の用意

作者の用意しているデモ画像を用いている。ダウンロードしたを解凍すると中に画像ファイルもあるので利用してほしい。また、画像を使用しているため、特にcssでは設定していない。デモ表示で必要なものは直接タグに書いた。

表示（wiggle）したい部分の記載

ボディ部分（<body>と</body>の間）に以下のように記載する。なお、下のデモ表示と同じように記載してみた。
※ボタンのスタイルは省略している。確認したい場合は、ブラウザーでソースを表示して見て欲しい。

<h4>デモ1－デフォルト設定</h4>
<div style="margin-left:40px; float:left;">
<img class="wiggle1" src="images/Mail.png" /></div>
<div style="clear:both;"></div>
<h4>デモ2－オプション設定－振動回数の制限</h4>
<div style="margin-left:40px; float:left;">
<img class="wiggle2" src="images/Phone.png" /></div>
<div style="margin-left:40px; float:left;">
<img class="wiggle3" src="images/Music.png" /></div>
<div style="clear:both;"></div>
<h4>デモ3－クリックとマウスオーバーでオンオフ</h4>
<div style="margin-left:40px; float:left;">
<img class="wiggle4" src="images/Phone.png" /></div>
<div style="margin-left:40px; float:left;">
<img class="wiggle5" src="images/Music.png" /></div>
<div style="clear:both;"></div>
<h4>デモ4－hoverでオンオフ/デフォルトとオプション付</h4>
<div style="margin-left:40px; float:left;">
<img class="wiggle6" src="images/Phone.png" /></div>
<div style="margin-left:40px; float:left;">
<img class="wiggle7" src="images/Music.png" /></div>
<div style="clear:both;"></div>
<h4>デモ5－－スタート/ストップボタン</h4>
<div id="start" style="float:left;">
<p>START</p></div>
<div id="stop" style="float:left;">
<p>STOP</p></div>
<div style="clear:both;"></div>
<div style="margin-left:40px; float:left;">
<img class="wiggle8" src="images/Phone.png" /></div>
<div style="margin-left:40px; float:left;">
<img class="wiggle8" src="images/Music.png" /></div>
<div style="clear:both;"></div>