[jQuery]jQueryUIで横方向にスライド（上下左右自由自在）

jQueryで、上から下へ降りてくるように表示するslideDownというエフェクトがありますが、横方向へのスライドや下から上に表示するスライドなどは、標準のエフェクトとして持っていないようです。
そこで、jQueryUIを使って、上下左右好きな方向へスライド表示させる方法をメモします。

jQueryUIのダウンロード

jQuery UI – Configure your download
jQUeryUIは上記からダウンロードできます。

スライドに関して言えばUI CoreとEffectsのslideだけあれば大丈夫だと思いますが、不安ならばすべてチェックしたままダウンロードしてもOKです。

スライドしてみる

参考：jQuery google api and other google hosted javascript libraries. – ScriptSrc.net

今回はjQueryとjQueryUIの設置、読み込みの説明がめんどくさかったので、Googleにホストされているものを読み込みます。

スライドのターゲットとなるのは以下のソース

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<div id="target">ここをスライド</div>

#targetをスライドさせる記述は以下の通り

// 左から右へ
$("#target").show("slide", {direction: "left"}, 1000);
// 右から左へ
$("#target").show("slide", {direction: "right"}, 1000);
// 上から下へ
$("#target").show("slide", {direction: "up"}, 1000);
// 下から上へ
$("#target").show("slide", {direction: "down"}, 1000);

↑これだと、パッと消えて、その後スライドして出てくるだけなので、
↓以下のようにすると、右方向にスライドして消えて、左から右へスライドして出現する。という表現ができます。

// 右方向にスライドして消えて、左から右へスライドして出現
$("#target").hide("slide", {direction: "right"}, 1000).show("slide", {direction: "left"}, 1000);

$.ajaxと組み合わせるならこんな感じ

$.ajax({
	url: "http://www.google.com/",
	type: "GET",
	beforeSend: function(){
		$("#target").hide("slide", {direction: "right"}, 1000);
	},
	success: function(html){
		$("#target").html(html).show("slide", {direction: "left"}, 1000);
	}
});

本当はこのページにデモを貼ろうと思ったんですが、ここjQueryUI使ってなかったんですよね。
お見せできないのは残念ですが、上のソースで試せるのでぜひやってみてください。