jQueryUIをはじめる方は必見、超簡単サンプル集～その４～

３つめはEffectです。

3.Effectのサンプルスクリプト

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>
    .toggler { width: 500px; height: 200px; }
    #effect  { width: 400px; height: 150px; background-color:#000; color:#fff; text-align:center; padding:25px;}
    .ui-effects-transfer { border: 2px dotted gray;}
  </style>
  <script>
  $(function() {
    function runEffect() {                              //runEffect関数の定義
      var selectedEffect = $( "#effectTypes" ).val();   //エフェクトの種類を取得
      var options = {};                                 //殆どのエフェクトはオプションは不要
      if ( selectedEffect === "scale" ) {               //scale,transfer,sizeは必要なのでセット
        options = { percent: 0 };
      } else if ( selectedEffect === "transfer" ) {
        options = { to: "#button", className: "ui-effects-transfer" };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
      $( "#effect" ).effect( selectedEffect, options, 500, callback);   //エフェクト実行
    };

    function callback() {       //実行後のコールバックを定義
      setTimeout(function() {
        $( "#effect" ).removeAttr( "style" ).hide().fadeIn();
      }, 1000 );
    };

    $( "#button" ).click(function() {   //ボタンをクックしたらrunEffectを実行
      runEffect();
      return false;
    });
  });
  </script>
</head>
<body>
<div class="toggler">
  <div id="effect">このdiv要素にEffectがかかります</div>
</div>
<select name="effects" id="effectTypes">
  <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="fade">Fade</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>
  <option value="slide">Slide</option>
  <option value="transfer">Transfer</option>
</select>
<input type="button" id="button" value="click">
</body>
</html>

→結構長いですがエフェクトの種類が多いので、
記述自体はそれほど難しいものではありません。
scriptの内容は主に次の3つです。
・選ばれたエフェクトを実行するrunEffect関数
・runEffectが実行された後に実行される(=callbackされる)callback関数
・クリック時にrunEffectを実行する記述

４つめはHide。
本日はこれで最後です。

4.Hideのサンプルスクリプト

Effect同様、様々なパターンがあります。
スクリプトもちょっと長いですが、セレクトボックスでパターンを選べるようにしているから。
1つのみであればもっと簡単になります。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  .toggler{ width: 500px; height: 200px; }
  #effect { width: 400px; height: 135px; border:1px solid #000; padding:5px;}
  </style>
  <script>
  $(function() {
    function runEffect() {
      var selectedEffect = $( "#effectTypes" ).val();   //選択されたエフェクトが何か取得
      var options = {};                                 //オプションは殆どのエフェクトでは設定しなくてOK
      if (selectedEffect === "scale"){                  //scaleとsizeが選択されている場合はオプションを設定する
        options={percent:0};
      } else if (selectedEffect === "size") {
        options={to:{width:200, height:60}};
      }
      $( "#effect" ).hide(selectedEffect, options, 1000, callback);     //実行
    };

    function callback(){        //一旦hideしたら再び表示する
      setTimeout(function(){
        $( "#effect" ).removeAttr("style").hide().fadeIn();
      }, 1000 );
    };

    $( "#button" ).click(function() {
      runEffect();
      return false;
    });
  });
  </script>
</head>
<body>
<input type="button" id="button" value="click">
<div class="toggler">
  <div id="effect">
    <h3>Hide</h3>
    <p>このボックスが選択したアクションで隠れます</p>
  </div>
</div>

→様々なhideのアクションがありますね。