ITコラム

jquery ui effect

jQuery

2018.07.06

jQuery【 jQuery UI 】アニメーションを作成する effect

jQuery UI を利用して ボックスを開閉する際のアニメーションを作成する方法について、jQuery【 jQuery UI 】toggle を使用してアニメーションを表示で、toggle を利用したサンプルを紹介しましたが、エフェクト機能は他にも種類があります。

今回は、jQuery UI を利用して実装することができるエフェクト機能を紹介します。

目次

1.effect 一覧
2.Bounce Effect 機能
3.Drop Effect 機能
4.Explode Effect 機能

1.effect 一覧

 
jQuery UI の toggle 使用して、エフェクト機能を実装する場合は、次のように記述します。

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

第 1 引数には、エフェクトの種類を指定します。
第 2 引数には、各エフェクトの設定値を指定します。
第 3 引数には、アニメーションの動作速度を、ミリ秒単位で指定します。

第 2 引数及び第 3 引数は省略できますが、第 2 引数のみを省略したい場合は、次のように記述します。

$("#wk_effect").toggle("blind", {}, 1000);

 
jQuery UI で利用できる 主な エフェクト機能には 以下のようなものがあります。

blind
ブラインドを上下するように 要素の表示/非表示を行う
水平と垂直の指定が可能

設定値:direction
動作の方向を指定(vertical<垂直>、horizontal<水平>)
初期値”vertical”

bounce
要素にバウンドするようなエフェクト機能
表示/非表示で使用すると、最初 又は 最後のバウンドがフェードイン/フェードアウトとなる

設定値:distance
バウンドの最大値をピクセル単位で指定
初期値20

設定値:times
バウンド回数を指定
初期値5

clip
クリップを挟んだり広げたりするように 要素の表示/非表示を行う
水平と垂直の指定が可能

設定値:direction
動作の方向を指定(vertical<垂直>、horizontal<水平>)
初期値”vertical”

drop
指定した方向に要素をスライドすることで、フェードイン表示/フェードアウト非表示を行う

設定値:direction
動作の方向を指定(up、down、left、right)
初期値”left”

explode
要素を破片が拡散する 又は 破片が集まるようなエフェクトで、表示/非表示を行う

設定値:piece
拡散する破片の数を指定(平方数でない場合は近い平方数に丸められる)
初期値9

fade
フェードエフェクトによって、要素の表示/非表示を行う
fold
折り畳むようなエフェクトによって、要素の表示/非表示を行う

設定値:size
折り畳まれた要素のサイズをピクセル単位で指定
初期値15

設定値:horizFirst
水平方向から先に折り畳まれるかを指定
初期値false

highlight
ハイライトエフェクトによって、要素の表示/非表示を行う

設定値:color
背景で使用される色を指定
初期値”#ffff99″

puff
要素を拡大しながらふっと消える 又は 現れる ようなパフエフェクトで、要素の表示/非表示を行う

設定値:puff
瞬間的に拡大される比率をパーセントで指定
初期値150

pulsate
振動するエフェクトによって、要素の表示/非表示を行う

設定値:times
振動する回数を指定
初期値5

scale
パーセントを指定して 要素の拡大縮小を行う

設定値:direction
動作の方向を指定(both、vertical<垂直>、horizontal<水平>)
初期値”both”

設定値:origin
要素が非表示になる地点を指定
初期値[“middle”, “center”]

設定値:percent
拡大・縮小の比率をパーセントで指定

設定値:scale
リサイズする領域を指定(box、content<内容>、both)
初期値”both”

shake
要素をシェイクするようなエフェクト機能
水平と垂直の指定が可能

設定値:direction
動作の方向を指定(left、right、up、down)
初期値”left”

設定値:distance
シェイクする距離をピクセル単位で指定
初期値20

設定値:times
シェイクする回数を指定
初期値3

size
指定した幅と高さになるようにサイズ変更を行う

設定値:to
リサイズする高さと幅をピクセル単位で指定({width, height})

設定値:origin
消失する地点を指定を指定
初期値[“top”, “left”]

設定値:scale
リサイズする領域を指定(box、content<内容>、both)
初期値”both”

slide
要素をスライドする

設定値:direction
動作の方向を指定(left、right、up、down)
初期値”left”

設定値:distance
エフェクトが作用する距離をピクセル単位で指定
初期値 要素のouterWidth

transfer
ある要素から別の要素へ外枠が遷移するようなエフェクト機能

設定値:className
遷移アニメーションする要素のclass名を指定

設定値:to
遷移先の要素のセレクタを指定

▲目次へ戻る

 

2.Bounce Effect 機能

 
jQuery UI の toggle を使用して、Bounce Effect 機能で表示/非表示を行うアニメーションを作成します。
bounce ボタンをクリックして ボックスを非表示(又は 表示)にしてみて下さい。

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

<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("bounce", { times: 3 }, "slow");
  });
});
//-->
</script>

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

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

▲目次へ戻る

 

3.Drop Effect 機能

 
jQuery UI の toggle を使用して、Drop Effect 機能で表示/非表示を行うアニメーションを作成します。
drop ボタンをクリックして ボックスを非表示(又は 表示)にしてみて下さい。

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

<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() {
  $("#d_btn").click(function() {
    $("#d_effect").toggle("drop", {direction:"right"});
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:30px;">
  <input type="button" id="d_btn" value="drop">
  <div id="d_effect" style="height:100px; background:pink;"></div>
</div>

▲目次へ戻る

 

4.Explode Effect 機能

 
jQuery UI の toggle を使用して、Explode Effect 機能で表示/非表示を行うアニメーションを作成します。
explode ボタンをクリックして ボックスを非表示(又は 表示)にしてみて下さい。

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

<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() {
  $("#e_btn").click(function() {
    $("#e_effect").toggle("explode", {pieces:16}, 1000);
  });
});
//-->
</script>

<div style="background-color:#CCC; padding:30px;">
  <input type="button" id="e_btn" value="explode">
  <div id="e_effect" style="width:200px; height:200px; background:palegreen;"></div>
</div>

▲目次へ戻る

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.