grailsとjrumbleで要素上をホバー時にガタガタと揺らすイフェクトを使用する

grailsとjrumbleで要素上をホバー時にガタガタと揺らすイフェクトを使用するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言

modules = {
    application {
        resource url:'js/application.js'
    }
    // jrumbleのモジュールを宣言
    jrumble {
        dependsOn 'jquery'
        resource url: 'js/jquery.jrumble.1.3.min.js'
    }
}

jquery.jrumble.1.3.min.jsはweb-app/jsに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
<!-- jrumbleを使用 -->
<r:require module="jrumble"/>
        <r:layoutResources />
 </head>

3. viewに以下のようなコードを追加します。

<!-- jrumbleを使用してホバー時に要素を揺らす -->
<div id="rumble" style="width:100px; height:100px; background-color:#ccddff; text-align:center; display:table; display:table-cell; vertical-align:middle;">
INFO
</div>
<script type="text/javascript">
  $(function(){
    $('#rumble').jrumble({
      x: 2,
      y: 2,
      rotation: 2
    });
    $('#rumble').hover(
      function(){
        $(this).trigger('startRumble');
      }, 
      function(){
        $(this).trigger('stopRumble');
      }
    );
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
jRumbleのホームページ
http://jackrugile.com/jrumble/