jQuery UIのaddClass、removeClassを使って、CSSの色要素をアニメーションで変化させる

jquery_ui

hoverで要素のスタイルを徐々に変化させたいときは、jQueryなどのJavaScriptを利用する必要があります。しかし、jQueryのanimate()関数に設定できるCSSプロパティは、height,top,opacityのように数値で表せるものに限定されているので、色などを徐々に変化させることができません。そこで今回はjQuery UIを利用してみました。

jQuery UI とは、jQuery公式のユーザインターフェース(UI)用ライブラリのことで、カレンダー、タブ、アコーディオン、ダイアログ、エフェクト、並べ替え、表示切替、ドラッグ移動、ドロップ、サイズ変更、スライダーなど、多様な UI を簡単に導入できるらしいです。
引用先:jQuery UI 日本語リファレンス

今回は、その中からクラスの追加、削除をアニメーションで変化させられるaddClassとremoveClassを使っていろんな要素をアニメーション変化させられるようにしました。

アニメーション例

例えば、以下の要素にマウスオーバーすると、文字と背景色がアニメーションで変化します。

こんにちは

前準備

以下のサイトの通りに、jQuery UIのファイル達を<head></head>内にロードします。
http://codezine.jp/article/detail/5273

コーディング

上記の例のhtml,css,jsは以下のようになっています。ここでは適当にファイル名がjquery_ui_example.*ということにしています。

jquery_ui_example.html

<div class="jquery_ui_example">こんにちは</div>

jquery_ui_example.css

/* マウスオーバー前のスタイル */
div.jquery_ui_example {
  background-color: #17acc7;
  color: #f5e31b;
  padding: 5px;
}
/* マウスオーバー後のスタイル */
div.jquery_ui_example.hover {
  background-color: #f5b01b;
  color: #d54039;
}

jquery_ui_example.js

$(function(){
  //関数として定義
  $.fn.hoverAnimation = function() {
    //付加するクラス名
    var className = "hover";
    $(this).mouseover(function(){
      //第一引数:付加するクラス名、第二引数:スピード(ミリ秒)
      $(this).not(":animated").addClass(className, 200);
    }).mouseout(function(){
      $(this).removeClass(className, 180);
    });
  };
  
  //変化させたい要素を指定して実行
  $("div.jquery_ui_example").hoverAnimation();
 
}

これで、変化前と変化後のスタイルをCSSで設定して、jsファイルに一行追加すればいろんな要素に適用できます。
jsファイルに一行追加する手間を省ければ最高なんですけどね、どうやるんですかね^^;