jQuery UIでタブにアニメーションを付ける

今回はjquery-ui-1.8.14.custom.min.jsを読み込んでいます。
対応ブラウザ:IE,Firefox,Google Chrome,Safari
参考サイト:http://gihyo.jp/design/serial/01/jsdoit/0006

$(function(){
  //テーマの読み込み
  $.uiThemeLoader.load("flick");

  $("#tabs_animation").tabs({    
    //初期表示のタブを指定する
    //0ならtab1,1ならtab2,2ならtab3が初期の表示タブになる
    selected: 1,
    
    //アニメーション
    fx: { height: "toggle", opacity: "toggle" }
  });
});

以下のソースはなくてもjquery-ui.cssを読み込めばできるらしいのですが、できなかったので参考サイトで使われていたのを載せておきます

(function($){
  jQuery.uiThemeLoader = {
    defaultTheme: "ui-lightness",
    defaultVersion: "1.8.1",
    currentTheme: null,
    $link: $("").attr("rel", "stylesheet").appendTo("head"),
    themes: {
       "ui-lightness": "UI lightness",
       "ui-darkness": "UI darkness",
       "smoothness": "Smoothness",
       "start": "Start",
       "redmond": "Redmond",
       "sunny": "Sunny",
       "overcast": "Overcast",
       "le-frog": "Le Frog",
       "flick": "Flick",
       "pepper-grinder": "Pepper Grinder",
       "eggplant": "Eggplant",
       "dark-hive": "Dark Hive",
       "cupertino": "Cupertino",
       "south-street": "South Street",
       "blitzer": "Blitzer",
       "humanity": "Humanity",
       "hot-sneaks": "Hot sneaks",
       "excite-bike": "Excite Bike",
       "vader": "Vader",
       "dot-luv": "Dot Luv",
       "mint-choc": "Mint Choc",
       "black-tie": "Black Tie",
       "trontastic": "Trontastic",
       "swanky-purse": "Swanky Purse"
   },

   load: function(theme, version){
        theme = theme || this.defaultTheme;
        version = version || this.defaultVersion;
        if (!this.themes[theme]) {
            throw Error("theme " + theme + " is not suporrt");
        }
this.$link.attr("href","http://ajax.googleapis.com/ajax/libs/jqueryui/"+version+"/themes/"+theme+"/jquery-ui.css");
        this.currentTheme = theme;
        return this;
    }
};
})(jQuery);

テキストテキストテキストテキストテキストテキスト