JQueryのアニメーションを使ってみよう

  • 2020年7月29日
  • 2020年7月29日
  • JQuery
  • 77view
  • 0件

JQueryにユーザーインターフェースのためのライブラリであるJQuery UIというのがあるのをご存知ですか。

ちょっとした動きをつけるときなど、JQuery UIを読み込んでおけば、とても簡単にできます。

今回は、JQuery本体についているエフェクト3つと、JQuery UIについているエフェクト14個をご紹介します。

今回は、デモページに跳ぶことなく、このプログのページ上で実演できるようにしました。

あとで、そのやり方もご紹介したいと思います。

DEMO1: show
サンプル1
DEMO2: fadeIn
サンプル2
DEMO3: slideDown
サンプル3
DEMO4: blind
サンプル4
DEMO5: bounce
サンプル5
DEMO6: clip
サンプル6
DEMO7: drop
サンプル7
DEMO8: explode
サンプル8
DEMO9: fold
サンプル9
DEMO10: fade
サンプル10
DEMO11: highlight
サンプル11
DEMO12: puff
サンプル12
DEMO13: pulsate
サンプル13
DEMO14: scale
サンプル14
DEMO15: shake
サンプル15
DEMO16: size
サンプル16
DEMO17: slide
サンプル17

それぞれのセルで、クリックしていただくと、そこに示されたエフェクトの様式で消え、また、クリックしていただくと同じ様式で現れるようになっています。

一つ一つについて、クリックしていただくとおわかりいただけるので、それぞれ説明は不要ですね。

設定の仕方だけ、ご説明したいと思います。

DEMO1〜3はJQuery本体のエフェクトで、それ以降は、JQuery UIのエフェクトです。

ワードプレスにはJQueryはデフォルトで搭載されていますので、JQuery UIだけ以下のように読み込みます。

JQuery UIの読み込み

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

HTMLの部分は、ここでは、テーブルセル内に一つ一つのボタンを入れましたので、table形式になっています。

また、CSSについては、冒頭に<style>タグ内に書き込みましたが、ワードプレスが自動的に書き換える機能があるようで、一部、下記のようにインラインに追加されていました。

ですので、CSSについては、説明を省略させていただきます。

HTML

<table>
<tbody>
<tr style="height: 60px;">
<th class="myth" style="height: 60px;">DEMO1: show</th>
<td class="mytd" onclick="Click1()" style="height: 60px;">
<div id="sample1" class="sample">サンプル1</div>
</td>
<th>略</th>
<td>略</td>
</tr>
略
</tbody>
</table>

このHTMLの部分では特に難しいことはありませんが、一つご説明するとすれば、クリックで反応するように、onclick=”Click1()”というのを付けています。

これにより、tdタグのセル内でクリックされると、JavaScriptの関数Click1が反応して処理をしてくれることとなります。

なお、このonclickはdivタグにつけても良さそうですが、出現させる時に困るためtdタグ内につけています。消滅してしまった後の場合、div要素は消えて無くなってしまうため、両方に対応できるように、ここではtdタグにつけています。ですから、セル内のどこをクリックしても反応するはずです。

JavaScript(JQuery)

<script type="text/javascript">
function Click1(){
  jQuery(function($){
    if($('#sample1').css('display')=='none'){
      $('#sample1').show(2000);
    } else {
      $('#sample1').hide(2000);
    }
  });
}
</script>

こちらが、JavaScriptの部分です。

HTMLのタグ内に仕込まれたClcik1を受けて、関数として定義されています。

通常のプログラムでは、jQuery(function($){ });のところは、$(function(){ });で済みますが、ワードプレス では、このように最初の$をjQueryに置き換え、()の中に$が入ります。

他と混同しないように、ワードプレス ではこのようにする必要があるようです。

DEMO1のエフェクトは、「show」と「hide」ですので、ここにあるように、sample1を指定して、それに対するメソッドとしてshowやhideをつけます。

「(2000)」は2000ミリ秒、つまり2秒かけてエフェクトが実行されます。

showとhideの処理を、次のようにif文で分岐しています。

if($('#sample1').css('display')=='none'){

} else {

}

つまり、idがsample1である要素に対して、そのcssのプロパティであるdisplayがnone、つまり画面から消えている時は、showのメソッドを実行し、それ以外(画面に現れている時。ちなみにこの時displayは”block”になっています。)は、hideを実行せよという条件分岐の処理を行っています。

出現する場合消える場合
DEMO1showhide
DEMO2fadeInfadeOut
DEMO3slideDownslideUp

最初のデモには、出現する場合しか書いておりませんが、消える場合のメソッドも併せて書くと、ここの表のようになります。

fadeInのように、2つ目の単語の始まりのみ大文字にするローワーキャメルケース になっています。

また、slideDownはslideInではないので勘違いしないようにしてください。・・・Downで表示されることになっています。

JQuery UIの場合

DEMO4〜17は、全てJQuery UIのエフェクトです。

こちらの場合、先ほどのコードでメソッドのところは、DEMO4のblindであれば、次のようになります。

function Click4(){
  jQuery(function($){
    if($('#sample4').css('display')=='none'){
      $('#sample4').show('blind');
    } else {
      $('#sample4').hide('blind');
    }
  });
}

なお、$(‘#sample4’).show(‘blind’);を$(‘#sample4’).show(‘blind’, 2000);のようにすると、2000ミリ秒、つまり2秒かけてエフェクトが起こるようになります。

ここでは、bounceだけ動きがよくわかるように、1000を指定してみました。他は全て初期値400のままです。

(また、DEMO8のexplodeだけボックスの幅を%の単位ではなく、ピクセルの絶対値にしましたので、他と異なる大きさになっています。JQuery UIのちょっとしたバグでしょう。%単位だとエフェクトの計算が大変すぎるのか、pxのような絶対値の単位にしか対応していないようです。)

エフェクト名と、エフェクトの持続時間以外にも、オプションとしてイージングの種類も付けられるようです。また、コールバック関数も付けられますから、エフェクトを順に実行させたい時などに使えそうです。

.effect( options )

初期値
effectstring
easingstringswing
durationnumber or string400
functionfunction()

まとめ

このJQuery UIはあまり広く知られていないように気がします。

文字が破裂するexplodeのようなエフェクトを初めて見たという方も多かったのではないかと思います。

複雑なエフェクトの場合は、自分で作ったらなかなか大変かですが、エフェクト名を指定するだけでできるのですから、とても便利です。

コールバック関数などと組み合わせて、オリジナルなアニメーションにもぜひ挑戦してください。