jQuery UI の タブの表示切替でのアニメーション方法

インターネットで探すと、古い fx オプションが沢山ヒットしますが、fx オプションは、1.10.x で削除されているはずです。show と hide を使うように jQuery UI 1.9 Upgrade Guide で書かれています。

The fx option has been deprecated in favor of new show and hide options. The show and hide options provide more customization over animations. See below, in the Widget section, for more details about the show and hide options. You should replace all uses of the fx option with show and hide.

The fx option will be removed in 1.10.

オプション設定で行います。show と hide に対して、アニメーションタイプ( effect ) のオブシェクトを設定する事によって、それぞれの effect の細かいオプションも設定可能になります。

$( "#mytabs" ).tabs( "option", "show", { effect: $("#show_animate").val() } );

effect: の後ろに、effect の内容特有のオプションが設定できます。
▼(例)
$( "#mytabs" ).tabs( "option", "show", { effect: "blind", direction: "right" } );

※ 一般設定としての delay, duration, easing も指定できます

表示(show)のアニメーション なし fade slide blind bounce clip drop explode fold highlight puff pulsate scale shake size ／ 消える時(hide)のアニメーション なし fade slide blind bounce clip drop explode fold highlight puff pulsate scale shake size

• 潮時
• 確信犯
• おもむろに

物事を始めたり終えたりするのに、適当な時機

１ 本人が悪いことでないと確信してなされる犯罪 ２ 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為 ◆犯罪というほど重大な行為でない場合にも用いる。2の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が1ではなく2の意で用いると回答した。

【徐に】落ち着いて、ゆっくりと行動するさま

fade	fadeIn・fadeOut
slide	左右
blind	上下
bounce	縦ゆれ
clip	上下
drop	fade+左右
explode	分割
fold	上下
highlight	最初明るく
puff	斜め?細かく揺れる?
pulsate	点滅
scale	拡大・縮小
shake	横ゆれ
size	拡大・縮小

▼ ソースコード

<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) {
	window[window.location.hostname+'.loadjQueryUI'] = true;
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
</script>
<script>
$(function(){
	var target_tab = 0;
	if ( typeof(localStorage["old_active"]) != 'undefined' ) {
		target_tab = parseInt(localStorage["old_active"]);
	}
	$( "#mytabs" ).tabs({
		show: false,
		hide: false,
		active: target_tab,
		activate: function( event, ui ) {
			localStorage["old_active"] = $( this ).tabs( "option", "active" );
		}
	});

});
function setAnimate() {

	if ( $("#show_animate").val() == 'false' ) {
		$( "#mytabs" ).tabs( "option", "show", false );
	}
	else {
		$( "#mytabs" ).tabs( "option", "show", { effect: $("#show_animate").val() } );
	}

	if ( $("#hide_animate").val() == 'false' ) {
		$( "#mytabs" ).tabs( "option", "hide", false );
	}
	else {
		$( "#mytabs" ).tabs( "option", "hide", { effect: $("#hide_animate").val() } );
	}

}
</script>
<b style='color:#f00'>表示(show)</b>のアニメーション <select id="show_animate" onchange='setAnimate();'>
<option value="false">なし</option>
<option value="fade">fade</option>
<option value="slide">slide</option>
<option value="blind">blind</option>
<option value="bounce">bounce</option>
<option value="clip">clip</option>
<option value="drop">drop</option>
<option value="explode">explode</option>
<option value="fold">fold</option>
<option value="highlight">highlight</option>
<option value="puff">puff</option>
<option value="pulsate">pulsate</option>
<option value="scale">scale</option>
<option value="shake">shake</option>
<option value="size">size</option>
</select>
 ／ <b style='color:#f00'>消える時(hide)</b>のアニメーション <select id="hide_animate" onchange='setAnimate();'>
<option value="false">なし</option>
<option value="fade">fade</option>
<option value="slide">slide</option>
<option value="blind">blind</option>
<option value="bounce">bounce</option>
<option value="clip">clip</option>
<option value="drop">drop</option>
<option value="explode">explode</option>
<option value="fold">fold</option>
<option value="highlight">highlight</option>
<option value="puff">puff</option>
<option value="pulsate">pulsate</option>
<option value="scale">scale</option>
<option value="shake">shake</option>
<option value="size">size</option>
</select>

<div id="mytabs">

	<ul>
		<li><a href="#tabs-1">潮時</a></li>
		<li><a href="#tabs-2">確信犯</a></li>
		<li><a href="#tabs-3">おもむろに</a></li>
	</ul>
	<div id="tabs-1">
物事を始めたり終えたりするのに、適当な時機
<br><br>
<img src="https://lh6.googleusercontent.com/-mSGJDelHAQE/UsSRAO-dFlI/AAAAAAAAR5g/eT8coExLq6s/s481/_img.jpg" style="border: solid 1px #c0c0c0" />
	</div>
	<div id="tabs-2">
１ 本人が悪いことでないと確信してなされる犯罪
２ 《1から転じて》悪いことだとわかっていながら行われた犯罪や行為
◆犯罪というほど重大な行為でない場合にも用いる。2の意はもともと誤用とされていたが、文化庁が発表した平成14年度「国語に関する世論調査」では、50パーセント以上の人が1ではなく2の意で用いると回答した。
	</div>
	<div id="tabs-3">
【徐に】落ち着いて、ゆっくりと行動するさま
<br><br>
<img src="https://lh5.googleusercontent.com/-ltSbzuO5HOg/UsSP6V5TFAI/AAAAAAAAR5Y/0ffEgL44z9o/s481/_img.jpg" style="border: solid 0px #000000;border-radius:10px;" />
	</div>
</div>

jQuery のバグだと思いますが、何かの組み合わせかタイミングでコンテンツが消えたままになる時があるので、あまりテストされていないと思われる複雑なアニメーションは使用しないほうがいいと思います。

また、最も簡単なアニメーションは fade を使った以下の設定です
$( "#mytabs" ).tabs( "option", "show", true } );

jQuery UI

Google がホスティングしている jQuery UI の CSS のテーマのチェックをする jQuery UI ボタン

jQuery UI のタブを使用時に、前回開いたタブを localStorage に保存して、次回の表示に使用する

jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする

jQuery UI の Spinner のボタン部分だけを利用して、マウスでクリックしたままでイベントが継続する増減ボタンを作成する

jQuery UI の Accordion Widget(アコーディオン)で、タイトルとコンテンツの指定方法

jQuery : table の行をクリックして、jQuery UI のダイアログを表示し、行データをダイアログ内で変更して table の列にデータを戻す

jQuery UI の datepicker の基本オプションとダイアログ(datepicker)の利用

jQuery UI(tabs) の内部コードを書き換えて、タブ上でのキーボード処理をキャンセルする

jQuery UI の slider と Google のホスティング