ITコラム

jQuery

2018.07.04

jQuery【 jQuery UI 】toggle を使用してアニメーションを表示

jQuery UI の toggle を利用すると、ボックスを開閉する際のアニメーションを作成することができます。

今回は、toggle の使用方法について解説いたします。

1. toggle を使用してブラインドのように開閉するアニメーションを作成

　
jQuery UI の toggle を使用して、ブラインドのように開閉するアニメーションを作成します。
blind ボタンをクリックしてボックスを開閉してみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
<!--
$(function() {
  $("#b_btn").click(function() {
    $("#b_effect").toggle("blind");
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:30px;">
  <input type="button" id="b_btn" value="blind">
  <div id="b_effect" style="height:100px; background:skyblue;"></div>
</div>

toggle に「”blind”」を設定すると、ブラインドのように開閉するアニメーションとなります。

また、上のサンプルはデフォルト設定で下から上に向かってブラインドが閉じますが、次のように設定すると、右から左に向かってブラインドが閉じます。

$("#b_effect").toggle("blind", {"direction": "horizontal"});

　
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。

▲目次へ戻る

2. toggle を使用してクリップを挟むように開閉するアニメーションを作成

　
jQuery UI の toggle を使用して、クリップのように両端から挟んで縮めたり両端に向かって広がるように開閉するアニメーションを作成します。
clip ボタンをクリックしてボックスを開閉してみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
<!--
$(function() {
  $("#c_btn").click(function() {
    $("#c_effect").toggle("clip", {direction:"horizontal"});
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:30px;">
  <input type="button" id="c_btn" value="clip">
  <div id="c_effect" style="height:100px; background:lightcoral;"></div>
</div>

toggle に「”clip”」を設定すると、クリップのように開閉するアニメーションとなります。
　
また、上のサンプルは、クリップが左右に挟みこまれるようにボックスが開閉しますが、次のようにデフォルト設定又は「”vertical”」を設定すると、上下に挟みこまれるようにボックスが開閉します。

$("#c_effect").toggle("clip");
又は
$("#c_effect").toggle("clip", {direction:"vertical"});

▲目次へ戻る

3. toggle を使用してシェイクしながら開閉するアニメーションを作成

　
jQuery UI の toggle を使用して、振動しながら開閉するアニメーションを作成します。
shake ボタンをクリックしてボックスを開閉してみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script type="text/javascript">
<!--
$(function() {
  $("#s_btn").click(function() {
    $("#s_effect").toggle("shake");
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:30px;">
  <input type="button" id="s_btn" value="shake">
  <div id="s_effect" style="height:100px; background:plum;"></div>
</div>

toggle に「”shake”」を設定すると、振動しながら開閉するアニメーションとなります。
　
また、上のサンプルは、デフォルト設定で左方向に振動しながら開閉しますが、振動の方向を以下のように上下左右で設定することができます。

$("#s_effect").toggle("shake", {direction:"up"});
又は
$("#s_effect").toggle("shake", {direction:"down"});
又は
$("#s_effect").toggle("shake", {direction:"left"});
又は
$("#s_effect").toggle("shake", {direction:"right"});

▲目次へ戻る