.switchClass()

http://api.jqueryui.com/1.10/switchClass/

マッチした要素のセットに、追加するclass削除するclassを指定して、入れ替わるスタイルの変化をアニメーションさせることが出来るようになります。

.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )

戻り値:jQuery

引数	説明
removeClassName	型：`String` マッチしている要素で、削除したい対象のclass属性の名称を1つまたは複数(複数の場合は、空白区切り)指定します。
addClassName	型：`String` マッチしている要素で、追加したい対象のclass属性の名称を1つまたは複数(複数の場合は、空白区切り)指定します。
duration	型：`Number` or `String` 初期値：`400` アニメーションする時間を文字列または数値で指定します。
easing	型：`String` 初期値：`"swing"` 移り変わりを表現するイージングの関数名を指定します。
complete	型：`Function()` アニメーションが完了した際に呼び出される関数を指定します。

.switchClass()メソッドを使うことで、classの追加・削除のアニメーションを一度に指定することが出来ます。

(※翻訳に自信が無いので、下に本文を載せておきます)
ネイティブCSSトランジションと同様に、jQueryのUIのclassアニメーションは、ある状態から別の状態へのスムーズな移行を実現し、その間の全ての詳細なCSSのスタイル変更情報は維持されます。

Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while allowing you to keep all the details about which styles to change in CSS and out of your JavaScript.

.switchClass()を含む全てのclassのアニメーションメソッドは、durationとイージングのカスタマイズ、アニメーション完了後のコールバックをサポートします。

全てのスタイルがアニメーション出来るわけではありません。例えば、背景画像です。そういったスタイルについてはアニメーション完了後に変更が適用されます。

サンプル

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>switchClass demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
  .big {
    width: 200px;
    height: 200px;
  }
  .blue {
    background-color: #00f;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>

<div class="big"></div>

<script>
$( "div" ).click(function() {
  $( this ).switchClass( "big", "blue", 1000, "easeInOutQuad" );
});
</script>

</body>
</html>