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"});

▲目次へ戻る

4. まとめ

jQuery UI の toggle を利用する方法について、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る