grailsとjqFloat.jsで指定した要素が浮かんだようなアニメーションを表示する

grailsとjqFloat.jsで指定した要素が浮かんだようなアニメーションを表示するには、以下の手順を実行します。

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

modules = {
    application {
        resource url:'js/application.js'
    }
  // jqFloatのモジュールを宣言
  jqfloat {
    dependsOn 'jquery'
    resource url:'js/jqfloat.min.js', disposition:'head'
  }
}

jqfloat.min.jsはweb-app/jsに配置します。

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

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

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

<!-- jqFloatで要素をふわふわと浮かんだようにアニメーションさせる -->
<style type="text/css" media="screen">
.information {
  padding: 0.5em;
  color: #5577dd;
  background-color: #ccddff;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
}
</style>
<div class="information">Information</div>
<script type="text/javascript">
  $(function(){
    $(".information").jqFloat({width: 10, height: 10, speed:700});
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
jqFloat.jsのホームページ
http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/