hide と drop

jQuery UI の hide を使い、アニメーション動作で要素を非表示にする

jQueryのメソッドにもshowやhideはあるんですが、
jQueryUIにもメソッドがあるのです。
それがhideとshow

1つ目の引数は、アニメーション動作の種類。
2つ目の引数は、1つ目の引数に指定したアニメーション動作固有のオプション。
3つ目の引数はアニメーション動作速度。
4つ目の引数は、アニメーション動作後に呼び出す関数。

１つ目の引数に指定するアニメーション動作は、
'blind'、'bounce'、'clip'、'drop'、'explode'、'fade'、'fold'、'highlight'、'puff'、'pulsate'、'scale'、'size'、'slide'
のいずれか。まあ適当に覚えてればよいでしょう。

最初の読み込み(あたりまえだけどjQueryがないといけないし、jQuery UIのライブラリも読み込まれてないといけない。

    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>

HTML部分

    <div id="jquery-ui-effect" class="ui-widget-content ui-corner-all">
      <p>「Hide」ボタンをクリックすると、ブラインドを開けるようなアニメーション動作で、このボックスを非表示にする。</p>
    </div>
    <div id="jquery-ui-effect2" class="ui-widget-content ui-corner-all">
      <p>つまりそれはどういうことなの？</p>
    </div>

JS部分

<script>
<!--
 jQuery( function() {
     jQuery( '#jquery-ui-effect2' ).hide();
     jQuery( '#jquery-ui-effect' ) . click( function() {
         jQuery( '#jquery-ui-effect' ) . hide( 'drop', { direction: "left" }, 300, function() {
             jQuery('#jquery-ui-effect2').show('drop', { direction: "right" }, 300);
	 } );
     })
     jQuery( '#jquery-ui-effect2' ) . click( function() {
         jQuery( '#jquery-ui-effect2' ) . hide( 'drop', { direction: "left" }, 300, function() {
             jQuery('#jquery-ui-effect').show('drop', { direction: "right" }, 300);
	 } );
     })
 } );
// -->

CSS部分

<style>
 <!--
#jquery-ui-effect {
    float: left;
    width: 400px;
    height: 100px;
    padding: 50px 15px;
    font-size: 15px;
    background: khaki;
}
#jquery-ui-effect2 {
    width: 400px;
    height: 100px;
    padding: 50px 15px;
    font-size: 15px;
    background: khaki;
}
 -->
 </style>

ちなみにこれ、イベント発生をやりすぎる(クリック連打、キーボード連打など)と挙動がおかしくなるので、
そこらへんをどうしたものか検討している。