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

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

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

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

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

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

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

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

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

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を実行せよという条件分岐の処理を行っています。

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

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 )

まとめ

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

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

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

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