jQuery.fn.animate()よりjQueryUI.fn.switchClass()を使った方が捗る気がしてきた

メリットはJavaScriptからスタイルを排除できること。

例として#fooの要素を警告文として文字色を赤くしたい場合を考える。

jQuery.fn.animate()は引数にアニメーション内容のスタイルをとる。

// jQUery

$('#foo').animate({'color': '#F00'}, 500);

対してjQueryUI.fn.switchClass()の引数はclass名そのもの。

// jQUeryUI

// .alert {
//   color: #F00;
// }
$('#foo').switchClass('', 'alert', 500);

スタイルをjsファイルに書かずに済む(スタイルはcssファイルだけで完結)ことはメンテナンス性、可読性が高いと言える。

もちろんcallbackにも対応しているので詳細は UI/Effects/ClassTransitions - jQuery JavaScript Library を参照。