ITコラム

scratched film strips

jQuery

2018.07.04

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

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

今回は、toggle の使用方法を紹介します。

目次

1.toggle を使用してブラインドのように開閉するアニメーションを作成
2.toggle を使用してクリップを挟むように開閉するアニメーションを作成
3.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"});

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.