grailsとanimate-textshadow.jsでホバー時に文字を光らせる

grailsとanimate-textshadow.jsでホバー時に文字を光らせるには、以下の手順を実行します。

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

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

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

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

  <g:layoutHead/>
<!-- animate-textshadow.jsを使用 -->
<r:require module="animatetextshadow"/>
        <r:layoutResources />
 </head>

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

<!-- animate-textshadow.jsでホバー時に文字列を光らせる -->
<span id="glow" style="font-size: 40px; color: #aaddff;">Grails</span>
<script type="text/javascript">
  $(function(){
    $("#glow").hover(
      function(){
        $(this).animate({textShadow: "#7799dd 0 0 15px"});
      }, 
      function(){
        $(this).animate({textShadow: "#7799dd 0 0 0"});
      }
    );
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
animate-textshadow.jsのホームページ
http://www.alexpeattie.com/projects/animate-textshadow/