
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
jQuery
2018.07.04
jQuery UI の toggle を利用すると、ボックスを開閉する際のアニメーションを作成することができます。
今回は、toggle の使用方法を紹介します。
1.toggle を使用してブラインドのように開閉するアニメーションを作成
2.toggle を使用してクリップを挟むように開閉するアニメーションを作成
3.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 の導入と使用方法をご参照下さい。
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"});
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"});
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.